javascript - 默认情况下隐藏 div 并在使用 Bootstrap 单击时显示它

Question

我想显示和隐藏一个 div，但我希望它默认隐藏并且能够在单击时显示和隐藏它。这是我编写的代码:

<a class="button" onclick="$('#target').toggle();">
 <i class="fa fa-level-down"></i>
</a>

<div id="target"> 
 Hello world... 
</div>

Answer 1

在这里，我提出了一种专门使用 Bootstrap framework built-in functionality 来执行此操作的方法.

1. 您需要确保目标 div 有一个 ID。
2. Bootstrap 有一个类“collapse”，这将隐藏你的 block 默认。如果您希望您的 div 可折叠并显示为 默认情况下，您需要将“in”类添加到折叠中。否则 切换行为将无法正常工作。
3. 然后，在您的超链接(也适用于按钮)上添加一个 href 指向您的目标 div 的属性。
4. 最后，添加属性data-toggle="collapse"来指示 Bootstrap 以将适当的切换脚本添加到此标记。

这是一个代码示例，可以直接复制粘贴到已经包含 Bootstrap 框架(最高版本 3.4.1)的页面上:

<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
    This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
    This div (Bar) is shown by default and can toggle
</div>