如何使用单击按钮切换div的可见性

时间:2013-09-29 03:43:00

标签: javascript css html show-hide

以下是我的javascript代码,用于在点击div时显示button

再次点击时如何隐藏它?然后点击它,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>

7 个答案:

答案 0 :(得分:56)

要在blocknone之间切换显示样式,您可以执行以下操作:

function toggleDiv(id) {
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";
}

工作演示:http://jsfiddle.net/BQUyT/2/

答案 1 :(得分:28)

如果您对jQuery soluton感兴趣:

这是HTML

<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>

这是jQuery脚本

$( "#button" ).click(function() {
    $( "#item" ).toggle();
});

你可以看到它在这里工作:

http://jsfiddle.net/BQUyT/

如果您不知道如何使用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/

答案 2 :(得分:1)

尝试以下逻辑:

<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>

答案 3 :(得分:1)

您可以使用jquery切换轻松地做到这一点。通过此切换或slideToggle,您还将获得漂亮的动画和效果。

$(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>

答案 4 :(得分:0)

使用JQuery .toggle() 你可以轻松完成它

$( ".target" ).toggle();

答案 5 :(得分:0)

如果您想使用它,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>

答案 6 :(得分:0)

引导程序4为此提供了Collapse component。它在后台使用了JavaScript,但是您不必自己编写任何JavaScript。

此功能适用于<button><a>

如果使用<button>,则必须设置data-toggledata-target属性:

<button type="button" data-toggle="collapse" data-target="#collapseExample">
  Toggle
</button>
<div class="collapse" id="collapseExample">
  Lorem ipsum
</div>

如果您使用<a>,则必须使用集合hrefdata-toggle

<a data-toggle="collapse" href="#collapseExample">
  Toggle
</a>
<div class="collapse" id="collapseExample">
  Lorem ipsum
</div>