默认情况下隐藏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框架内置功能的方法.

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

Answer 2

只需加水 style="display:none";即可<div>

小提琴我说:http://jsfiddle.net/krY56/13/

jQuery的:

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

首选拥有CSS类 .hidden

.hidden {
     display:none;
}

Answer 3

试试这个:

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

Answer 4

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