[英]How to Toggle a div's visibility by using a button click
Below is my javascript code which i used to show a div
when clicked on a button
.下面是我用来在单击
button
时显示div
javascript 代码。
How can I hide it when clicked again?再次单击时如何隐藏它? And then on clicking it,
div
should 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>
To switch the display-style between block
and none
you 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/
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:你可以看到它在这里工作:
http://jsfiddle.net/BQUyT/ http://jsfiddle.net/BQUyT/
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/
jQuery would be the easiest way if you want to use it, but this should work.如果您想使用它,jQuery 将是最简单的方法,但这应该可行。
function showHide(){
var e = document.getElementById('e');
if ( e.style.display !== 'none' ) {
e.style.display = 'none';
} else {
e.style.display = '';
}
}
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>
You can easily do it with jquery toggle.您可以使用 jquery 切换轻松地做到这一点。 By this toggle or slideToggle you will get nice animation and effect also.
通过此切换或滑动切换,您还将获得不错的动画和效果。
$(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 provides the Collapse component for that. Bootstrap 4 为此提供了Collapse 组件。 It's using JavaScript behind the scenes, but you don't have to write any JavaScript yourself.
它在幕后使用 JavaScript,但您不必自己编写任何 JavaScript。
This feature works for <button>
and <a>
.此功能适用于
<button>
和<a>
。
If you use a <button>
, you must set the data-toggle
and data-target
attributes:如果使用
<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 href
and data-toggle
:如果使用
<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.