使用Bootstrap默认隐藏div，并在单击时显示它

Question

使用Bootstrap默认隐藏div，并在单击时显示它

javascriptjqueryhtmlcsstwitter-bootstrap

75

我想展示和隐藏一个 div，但默认情况下它应该是隐藏状态，并且能够在单击后显示和隐藏。这是我编写的代码：

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

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

- Ouda

4个回答

25

只需将水加入到 <div> 中 style="display:none";

我说的是 Fiddles：http://jsfiddle.net/krY56/13/

jQuery：

function toggler(divId) {
    $("#" + divId).toggle();
}

建议使用CSS类.hidden

.hidden {
     display:none;
}

- Ali Gajani

1

Ouda，严格来说，这是使用jQuery进行切换的方法。而不是使用bootstrap来完成同样的事情。CowWarrior实际上回答了你提出的问题。Ouda的答案“有效”，但实际上并不是你所问的。不确定你能做什么...但这就是为什么CowWarrior的答案得分更高的原因。 - ftrotter

@RolandiXor，我猜这是因为Bootstrap中已经有一个.hidden类（至少在v3.3.7中有），它设置了display:none !important，这个设置不会被jQuery.toggle()设置的内联display:block所覆盖。 - ch1pn3ss

17

尝试这个：

<button class="button" onclick="$('#target').toggle();">
    Show/Hide
</button>
<div id="target" style="display: none">
    Hide show.....
</div>

- Anil Bhattarai100

1

在onclick方法中缺少return false;以防止跳转到href，并使用class="collapse"而不是style="display: none"。 - Manic Depression

10

我意识到这个问题有点过时了，因为它在谷歌搜索中显示出类似的问题，所以我想在@CowWarrior的答案基础上再详细介绍一下。我正在寻找一个类似的解决方案，在搜寻无数的SO问题/答案和Bootstrap文档后，解决方案非常简单。同样，这将使用内置的Bootstrap collapse类来显示/隐藏div并使用Bootstrap的“折叠事件”。

我的发现是，使用Bootstrap手风琴很容易做到，但大多数情况下，即使所需功能“有点”类似于手风琴，但它在某种程度上与手风琴不同，人们希望基于，例如，在navbar上的菜单按钮上显示或隐藏<div>。以下是一个简单的解决方案。锚标签（<a>）可以是导航栏项目，并且根据折叠事件，相应的div将替换现有的div。它在CodeSnippet中看起来有点凌乱，但它非常接近实现功能-

JavaScript所做的就是使用

$(".main-container.collapse").not($(this)).collapse('hide');

使所有其他<div>隐藏，通过检查Collapse事件shown.bs.collapse显示加载的<div>。这是Bootstrap关于Collapse Event的文档。

注意：main-container只是一个自定义类。

这就是它-

$(".main-container.collapse").on('shown.bs.collapse', function () {    
//when a collapsed div is shown hide all other collapsible divs that are visible
       $(".main-container.collapse").not($(this)).collapse('hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<a href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</a>

<div id="Bar" class="main-container collapse in">
    This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
    This div (#Foo) is hidden by default
</div>

- Anjan Biswas

对我来说并不过时。正是我在寻找的。 - HPWD

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CowWarrior · Accepted Answer

在这里，我提出了一种仅使用内置功能的Bootstrap框架的方法。

您需要确保目标 div 具有 ID。
Bootstrap 有一个名为 "collapse" 的类，它将默认隐藏您的块。如果您希望您的 div 可折叠且默认显示，则需要向收缩添加 "in" 类。否则，切换行为将无法正常工作。
然后，在您的超链接（对按钮也适用）上添加一个 href 属性，该属性指向您的目标 div。
最后，添加属性 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>