默认情况下隐藏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框架内置功能专门执行此操作的方法。

1. 您需要确保目标div具有ID。
2. Bootstrap有一个class“崩溃”，默认情况下会隐藏您的块。如果您希望div可折叠并默认显示，则需要在折叠中添加“ in”类。否则，切换行为将无法正常工作。
3. 然后，在您的超链接上（也适用于按钮），添加一个指向目标div的href属性。
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>

试试这个：

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

我意识到这个问题有点过时，并且因为它出现在Google搜索类似问题上，所以我认为我将在@CowWarrior的答案之外再扩大一点。我一直在寻找类似的解决方案，并且在搜索了无数SO问题/答案和Bootstrap文档后，解决方案非常简单。同样，这将使用内置的Bootstrapcollapse类来显示/隐藏div和Bootstrap的“折叠事件”。

我了解到，使用Bootstrap手风琴很容易，但是大多数时候，即使所需的功能与“手风琴”有些“相似”，但在某种程度上，人们希望<div>根据它来显示皮革是不同的，可以说是上的菜单按钮navbar。下面是一个简单的解决方案。锚标记（<a>）可以是导航栏项目，并且基于折叠事件，相应的div将替换现有的div。在CodeSnippet中看起来有些草率，但与实现功能非常接近-

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