按下按钮时下拉div

我目前有一个与javascript代码链接的HTML页面，它允许我按下一个显示隐藏div内容的按钮。该功能工作正常，但是当按下按钮时，隐藏的div会显示在按钮上方。无论如何，它可以下降到按钮下方，而不是下降。这里是我使用的代码：按下按钮时下拉div

HTML：

<div id="spoiler1" style="display:none"> 
    <p>1. Climb a tree<input type="checkbox"></p> 
    <p>2. Roll down a really big hill<input type="checkbox" ></p> 
    <p>3. Camp out in the wild<input type="checkbox" ></p> 
    <p>4. Build a den<input type="checkbox" ></p> 
    <p>5. Skim a stone<input type="checkbox" ></p> 
    <p>6. Run around in the rain<input type="checkbox" ></p> 
    <p>7. Fly a kte<input type="checkbox" ></p> 
    <p>8. Catch a fish with a net<input type="checkbox" ></p> 
    <p>9. Eat an apple straight from a tree<input type="checkbox" ></p> 
    <p>10. Play conkers<input type="checkbox" ></p> 

</div> 

<button id="button1" title="Click to show/hide content" type="button1" onclick="readmore1()">Adventurer &#x25BC;</button> 
<div id="spoiler1" style="display:none">spoiler text</div>

的Javascript：

function readmore1(){ 
    var spoiler1 = document.getElementById('spoiler1'); 
    var btn = document.getElementById('button1'); 


    if(spoiler1.style.display=='none') { 
     spoiler1.style.display = ''; 
     btn.innerHTML = "Adventurer &#x25B2;"; 
    } else { 
     spoiler1.style.display = 'none'; 
     btn.innerHTML = "Adventurer &#x25BC;"; 
    } 
}

任何帮助将非常感激。

CSS：

#button1 { 

    display: inline-block; 
font: normal 1.5em optima; 
line-height: 10px; 
margin-left: -10px; 
margin-bottom:20px; 
width: 250px; 
height:60px; 
border-radius:8px; 
text-align: center; 
vertical-align: central; 
color: #fff; 
border: none; 
position: relative; 
top: -5px; 
left: 30px;

}

来源

2014-04-03 user3437161

你可以发布你的CSS？ –

你的意思是你想显示按钮下方的隐藏div吗？ –

你应该永远不要多使用一次ID！扰流1被使用两次。也许位置：相对;在父divs和按钮可以解决你的问题，但要确保你应该分享你的css – caramba

Z-指数应该在CSS

如何以下使用它的一个例子是排序，我希望这有助于:)

这里是一个代码示例，我将使用999999：p这只是你如何去做的一个例子

http://www.w3schools.com/cssref/pr_pos_z-index.asp

#YourDiv { 
Z-Index: 999999 
} 

#YourButton { 
Z-Index:-999999 
}

来源

2014-04-03 15:14:05 ByronMcGrath

请不要链接到w3schools。 http://w3fools.com – idmean

不是，它给你Z-index的准确信息，应该帮助他解决这个问题。所以我会推荐它用于这种情况，可能并不是所有情况下它都是旧的HTML属性，这些属性不兼容，但在这里很好。 – ByronMcGrath

这次也许是这种情况，但我建议始终链接到MDN：https：//developer.mozilla.org/en-US/docs/Web/CSS/z-index – idmean

嘿队友我看过你们的更详细代码，这里是放在这里的代码示例，我你的Javascript更新到jQuery的，因为它是一个更强大的语言:)

<!DOCTYPE html> 
<html> 
<head> 
<script> 

$(document).ready(function(){ 
     $("#spoiler1").hide(); 
$("#button1").click(function(){ 
    $("#spoiler1").show(); 
     });  

    $("#button").click(function(){ 
$("#spoiler1").hide(); 
     });  

}); 
</script> 
</head> 
<body> 
     <button id="button1" title="Click to show/hide content" type="button1">Adventurer &#x25BC;   </button> 
     <button id="button" title="Click to show/hide content" type="button">Hide</button> 
<div id="spoiler1" style="display:none"> 
    <p>1. Climb a tree 
    <input type="checkbox"> 
    </p> 
    <p>2. Roll down a really big hill 
    <input type="checkbox"> 
    </p> 
    <p>3. Camp out in the wild 
    <input type="checkbox"> 
    </p> 
    <p>4. Build a den 
    <input type="checkbox"> 
    </p> 
    <p>5. Skim a stone 
    <input type="checkbox"> 
    </p> 
    <p>6. Run around in the rain 
    <input type="checkbox"> 
    </p> 
    <p>7. Fly a kte 
    <input type="checkbox"> 
    </p> 
    <p>8. Catch a fish with a net 
    <input type="checkbox"> 
    </p> 
    <p>9. Eat an apple straight from a tree 
    <input type="checkbox"> 
    </p> 
    <p>10. Play conkers 
    <input type="checkbox"> 
    </p> 
</div> 
</body> 
</html>

来源

2014-04-04 08:28:40 ByronMcGrath

哦，我认为部分原因按钮是低于div是因为你如何编写它在HTML :) – ByronMcGrath

嗨拜伦，我刚刚尝试改变代码，所以它符合上述，但它仍然没有工作。我有两个按钮“冒险家”和“隐藏”，点击时不会显示任何内容。还有什么我可以尝试吗？ – user3437161

尝试添加在第一个脚本之上和头部之下 – ByronMcGrath

我通常对这种效果使用CSS。所有你需要的是“输入[type ='checkbox']”和标签。

的test.html

<link rel="stylesheet" type="text/css" href="test.css"/> 
<input type="checkobx" id="toggleCheck"/> 
<label for="toggleCheck">Label for button</label> 
<div class="hiddenContent"> 
    <p>Yours hidden stuff goes here</p> 
</div>

test.css

#toggleCheck{ display: none;} 
label[for='toggleCheck']{ 
    padding: 5px 10px; 
    background: green; 
    border-radius: 4px; 
    box-shadow: 1px 1px 2px black; 
} 
.hiddenContent{ 
    display: none; 
} 
#toggleCheck:checked + label{ 
    /* Styles for button in opened state*/ 
    box-shadow: 0px 0px 2px black; 
} 
#toggleCheck:checked + label + .hiddenContent{ 
    display: block; 
}

有了这个技术，你从你的意见分开你的逻辑。恕我直言，使用JS这种简单的东西会导致黑暗的一面。

来源

2014-04-04 08:48:48 KillaBee

按下按钮时下拉div

回答

相关问题