如何通过按钮点击来切换div的可见性

Question

这是我用来在点击一个 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>

- user2827600

---

请稍等，我会给您提供一个演示。 - Jacques ジャック

感谢杰克考虑这个问题，请慢慢思考并给我一个答案...再次感谢。 - user2827600

你每个div都有一个按钮吗？ - The Alpha

@user2827600，你的HTML将有助于理解您想要的方式，否则我可以考虑使用此链接（http://jsfiddle.net/heera/933Ht/）。 - The Alpha

正确答案如下。 - Jacques ジャック

Answer 1

要在 block 和 none 之间切换显示样式，可以像这样操作：

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

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

- Gigo

---

如果最初将样式未添加到DIV中，会怎么样呢？ - Ahsan Shah

如果 div.style.display == "none"，那么它将会是 false，并且样式将被设置为 "none"。 - Gigo

对于追随者来说，这意味着“如果没有初始的div.style.display，它仍然可以工作”。 - rogerdpack

也适用于 _inline-block_。div.style.display = div.style.display == "none" ? "inline-block" : "none"; - pipepiper

注意：如果用户加载页面时div已经被隐藏，这个功能在第一次点击时将不起作用。为解决这个问题，请将 div.style.display == "none" ? "block" : "none"; 改为 div.style.display == "block" ? "none" : "block";。 - The Codesee

如果您希望它是动态的怎么办？我有一个函数，它接受一个ID并切换显示。如果我使用其他显示方式，例如块、内联块、弹性等，这将无法正常工作。 - thatOneGuy

Answer 2

如果您对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/

- Jan

---

OP没有标记jQuery...那么为什么要用jQuery呢？ - Ahsan Shah

True，但是 OP 也提到他是 JavaScript 编程的新手，所以也许他甚至不知道 jQuery，这就是为什么我在安装 jQuery 的答案中进行了扩展。 - Jan

“OP” 在他的评论中提到：“是的，我可以使用 jQuery 来切换，但是我不允许使用 jQuery，FaceOfJock 先生。” - The Alpha

@MarkHall，真的吗？我一直以为它是“相反”的缩写，但今天学到了，谢谢。 - The Alpha

@SheikhHeera http://meta.stackexchange.com/questions/40353/stack-exchange-glossary-dictionary-of-commonly-used-terms - Mark Hall

Answer 3

如果您想使用最简单的方式，可以使用jQuery，但是以下方法也可以实现相同效果。

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

    if ( e.style.display !== 'none' ) {
        e.style.display = 'none';
    } else {
        e.style.display = '';
    }
}

- Jacques ジャック

---

如果最初没有添加显示样式到 DIV，会怎么样？ - Ahsan Shah

显示应该自动设置为块状，特别是如果您使用CSS重置，我强烈建议这样做。 - Jacques ジャック

不好意思，伙计，我已经尝试了你的代码，但它并没有按照预期工作。 - Ahsan Shah

你说得对，我肯定在某个地方使用了这段代码。除非你已经找到答案，否则请给我一分钟。 - Jacques ジャック

好的，我在我的答案中提供了一个纯JS而没有jQuery的工作解决方案。链接：http://lucienconsulting.com/dev/ - Jacques ジャック

Answer 4

您可以使用jQuery的toggle方法轻松实现。使用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>

- CodeLover

Answer 5

尝试使用以下逻辑：

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

- Ahsan Shah

---

其实从问题中我还不太清楚......但是现在看了评论。 - Ahsan Shah

你最近的修改导致脚本崩溃了，提醒一下。如果它是“null”，它已经被阻止了，因此会使你的代码崩溃。 - Jacques ジャック

Answer 6

Bootstrap 4提供了折叠组件。它在幕后使用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>，您必须设置 href 和 data-toggle：

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

- Benoit Blanchon

Answer 7

通过 JQuery 中的 .toggle()，您可以轻松实现它。

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

- Sobin Augustine

---

我看不到jQuery标签，你呢？ - Ahsan Shah