[英]How to Toggle a div's visibility by using a button click
下面是我用来在单击button
时显示div
javascript 代码。
再次单击时如何隐藏它? 然后点击它, 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>
要在block
和none
之间切换显示样式,您可以执行以下操作:
function toggleDiv(id) {
var div = document.getElementById(id);
div.style.display = div.style.display == "none" ? "block" : "none";
}
工作演示: http : //jsfiddle.net/BQUyT/2/
如果您对 jQuery 解决方案感兴趣:
这是 HTML
<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>
这是 jQuery 脚本
$( "#button" ).click(function() {
$( "#item" ).toggle();
});
你可以看到它在这里工作:
如果您不知道如何使用 jQuery,则必须使用这一行来加载库:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
然后使用这一行开始:
<script>
$(function() {
// code to fire once the library finishes downloading.
});
</script>
所以对于这种情况,最终的代码是这样的:
<script>
$(function() {
$( "#button" ).click(function() {
$( "#item" ).toggle();
});
});
</script>
如果您需要其他任何东西,请告诉我
您可以在此处阅读有关 jQuery 的更多信息: http : //jquery.com/
如果您想使用它,jQuery 将是最简单的方法,但这应该可行。
function showHide(){
var e = document.getElementById('e');
if ( e.style.display !== 'none' ) {
e.style.display = 'none';
} else {
e.style.display = '';
}
}
尝试以下逻辑:
<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>
您可以使用 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>
使用 JQuery .toggle()
你可以轻松完成
$( ".target" ).toggle();
Bootstrap 4 为此提供了Collapse 组件。 它在幕后使用 JavaScript,但您不必自己编写任何 JavaScript。
此功能适用于<button>
和<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>
如果使用<a>
,则必须使用 set href
和data-toggle
:
<a data-toggle="collapse" href="#collapseExample">
Toggle
</a>
<div class="collapse" id="collapseExample">
Lorem ipsum
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.