默认情况下隐藏div，并通过引导进行点击显示
我想显示并隐藏一个div ，但我希望它被默认隐藏，并能够显示和隐藏点击。 这是我所做的代码：
<a class="button" onclick="$('#target').toggle();"> <i class="fa fa-level-down"></i> </a> <div id="target"> Hello world... </div>
只要添加水style="display:none"; 到<div>
小提琴我说： http : //jsfiddle.net/krY56/13/
jQuery的：
function toggler(divId) { $("#" + divId).toggle(); }
首选有一个CSS类.hidden
.hidden { display:none; }
在这里，我提出了一种专门使用Bootstrap框架内置function的方法。
- 你需要确保目标
div有一个ID。 - Bootstrap有一个
class“崩溃”，这将默认隐藏你的块。 如果你想你的div是可折叠的，默认情况下显示你需要添加“in”类的崩溃。 否则，切换行为将无法正常工作。 - 然后，在你的超链接（也适用于button），添加一个href属性，指向你的目标股利。
- 最后，添加属性
data-toggle="collapse"以指示Bootstrap向该标签添加适当的切换脚本。
这里是一个代码示例，可以直接复制粘贴到已经包含Bootstrap框架的页面上：
<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>
试试这个：
<button class="button" onclick="$('#target').toggle();"> Show/Hide </button> <div id="target" style="display: none"> Hide show..... </div>
我意识到这个问题有点过时了，因为它显示在谷歌search类似的问题，我想我会扩大一点，在@ CowWarrior的回答上。 我正在寻找一些类似的解决scheme，并通过无数的问题/答案和Bootstrap文档search后，解决scheme非常简单。 同样，这将使用内置的Bootstrap collapse类来显示/隐藏div和Bootstrap的“折叠事件”。
我意识到使用Bootstrap Accordion很容易做到这一点，但大多数情况下，即使所需的function与Accordion“有点”相似，但它的方式也不同，只是希望显示hide <div>基于，可以说，在navbar上的菜单button。 以下是对此的简单解决scheme。 定位标记（ <a> ）可以是导航栏项目，并基于崩溃事件相应的div将replace现有的div。 它在CodeSnippet中看起来略显sl but，但实现function相当接近，
JavaScript所做的就是让所有其他的<div>隐藏起来
$(".main-container.collapse").not($(this)).collapse('hide');
当加载的<div>通过检查Collapse事件shown.bs.collapse 。 这里是关于崩溃事件的Bootstrap 文档 。
注意： 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="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>
