Html 如何通过单击按钮来切换 div 的可见性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19074171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Toggle a div's visibility by using a button click
提问by user2827600
Below is my javascript code which i used to show a divwhen clicked on a button.
下面是我的 javascript 代码，我曾经div在单击button.
How can I hide it when clicked again? And then on clicking it, divshould be visible again?
再次单击时如何隐藏它？然后点击它，div应该再次可见？
<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
</script>
采纳答案by Jan
In case you are interested in a jQuery soluton:
如果您对 jQuery 解决方案感兴趣：
This is the HTML
这是 HTML
<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>
This is the jQuery script
这是 jQuery 脚本
$( "#button" ).click(function() {
$( "#item" ).toggle();
});
You can see it working here:
你可以看到它在这里工作：
If you don't know how to use jQuery, you have to use this line to load the library:
如果您不知道如何使用 jQuery，则必须使用这一行来加载库：
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
And then use this line to start:
然后使用这一行开始：
<script>
$(function() {
// code to fire once the library finishes downloading.
});
</script>
So for this case the final code would be this:
所以对于这种情况，最终的代码是这样的：
<script>
$(function() {
$( "#button" ).click(function() {
$( "#item" ).toggle();
});
});
</script>
Let me know if you need anything else
需要帮助请叫我
You can read more about jQuery here: http://jquery.com/
您可以在此处阅读有关 jQuery 的更多信息：http: //jquery.com/
回答by Gigo
To switch the display-style between blockand noneyou can do something like this:
要在block和之间切换显示样式，none您可以执行以下操作：
function toggleDiv(id) {
var div = document.getElementById(id);
div.style.display = div.style.display == "none" ? "block" : "none";
}
working demo: http://jsfiddle.net/BQUyT/2/
工作演示：http: //jsfiddle.net/BQUyT/2/
回答by CodeLover
You can easily do it with jquery toggle. By this toggle or slideToggle you will get nice animation and effect also.
您可以使用 jquery 切换轻松地做到这一点。通过此切换或滑动切换，您还将获得不错的动画和效果。
$(function(){
$("#details_content").css("display","none");
$(".myButton").click(function(){
$("#details_content").slideToggle(1000);
})
})<div class="main">
<h2 class="myButton" style="cursor:pointer">Click Me</h2>
<div id="details_content">
<h1> Lorem Ipsum is simply dummy text</h1>
<p> of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>回答by Ahsan Shah
Try following logic:
尝试以下逻辑：
<script type="text/javascript">
function showHideDiv(id) {
var e = document.getElementById(id);
if(e.style.display == null || e.style.display == "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
</script>
回答by Jacques ジャック
jQuery would be the easiest way if you want to use it, but this should work.
如果您想使用它，jQuery 将是最简单的方法，但这应该可行。
<script type="text/javascript">
function showHide(){
var e = document.getElementById('e');
if ( e.style.display != 'none' ) {
e.style.display = 'none';
}
else {
e.style.display = '';
}
}
</script>
回答by Benoit Blanchon
Bootstrap 4 provides the Collapse componentfor that. It's using JavaScript behind the scenes, but you don't have to write any JavaScript yourself.
Bootstrap 4为此提供了Collapse 组件。它在幕后使用 JavaScript，但您不必自己编写任何 JavaScript。
This feature works for <button>and <a>.
此功能适用于<button>和<a>。
If you use a <button>, you must set the data-toggleand data-targetattributes:
如果使用 a <button>，则必须设置data-toggle和data-target属性：
<button type="button" data-toggle="collapse" data-target="#collapseExample">
Toggle
</button>
<div class="collapse" id="collapseExample">
Lorem ipsum
</div>
If you use a <a>, you must use set hrefand data-toggle:
如果使用 a <a>，则必须使用 sethref和data-toggle：
<a data-toggle="collapse" href="#collapseExample">
Toggle
</a>
<div class="collapse" id="collapseExample">
Lorem ipsum
</div>
回答by Sobin Augustine
with JQuery .toggle()you can accomplish it easily
使用 JQuery，.toggle()您可以轻松完成
$( ".target" ).toggle();
