33

下面是我的 javascript 代码，我用来div在单击 a 时显示 a 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>
4

7 回答 7

69

要在 和 之间切换显示样式block，none您可以执行以下操作：

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

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

于 2013-09-29T03:56:16.037 回答
34

如果您对 jQuery 解决方案感兴趣：

这是 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/

于 2013-09-29T03:55:48.707 回答
2

如果您想使用 jQuery，它将是最简单的方法，但这应该可以。

function showHide(){
    var e = document.getElementById('e');

    if ( e.style.display !== 'none' ) {
        e.style.display = 'none';
    } else {
        e.style.display = '';
    }
}
于 2013-09-29T04:01:22.117 回答
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>
于 2013-09-29T03:59:19.300 回答
1

您可以使用 jquery toggle 轻松做到这一点。通过此切换或 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>

于 2020-01-16T06:56:36.973 回答
0

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

$( ".target" ).toggle();
于 2013-09-29T03:55:40.440 回答
0

Bootstrap 4 为此提供了Collapse 组件。它在幕后使用 JavaScript，但您不必自己编写任何 JavaScript。

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

如果使用 a <button>，则必须设置data-toggleanddata-target属性：

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

如果使用 a <a>，则必须使用 sethref和data-toggle：

<a data-toggle="collapse" href="#collapseExample">
  Toggle
</a>
<div class="collapse" id="collapseExample">
  Lorem ipsum
</div>
于 2019-10-15T07:31:45.983 回答