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框架内置功能来完成此任务的方法。

您需要确保目标div有ID。
Bootstrap有一个class＆＃34;崩溃＆＃34;，这会隐藏你的块默认。如果你想让你的div可以折叠并显示出来默认你需要在＆＃34;中添加＆＃34;崩溃的阶级。否则切换行为无法正常工作。
然后，在您的超链接上（也适用于按钮），添加一个href 指向目标div的属性。
最后，将属性data-toggle="collapse"添加到instruct 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

我意识到这个问题有点过时了，因为它出现在谷歌搜索类似的问题上，我想我会在@ CowWarrior的回答之上进一步扩展。我一直在寻找类似的解决方案，在搜索了无数的SO问题/答案和Bootstrap文档后，解决方案非常简单。同样，这将使用内置的Bootstrap collapse类来显示/隐藏div和Bootstrap＆＃34; Collapse Event＆＃34;。

我意识到使用Bootstrap手风琴很容易做到这一点，但大多数时候，即使所需的功能有点＆＃34;有些＆＃34;类似于手风琴，它的不同之处在于人们希望根据<div>上的菜单按钮显示隐藏navbar。以下是一个简单的解决方案。锚标记（<a>）可以是导航栏项目，并且基于崩溃事件，相应的div将替换现有的div。它看起来在CodeSnippet中略显草率，但它非常接近实现功能 -

JavaScript所做的就是使用

隐藏所有其他<div>

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

通过检查折叠事件<div>显示加载的shown.bs.collapse。这是崩溃事件中的Bootstrap documentation。

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

在这里 -

＆＃13;

$(".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');
});

＆＃13;

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

＆＃13;

默认情况下隐藏div并在单击时使用bootstrap显示

4 个答案: