默认情况下隐藏div并使用bootstrap在单击时显示它
我想要显示和隐藏一个div，但我希望它在默认情况下是隐藏的，并且能够在单击时显示和隐藏。下面是我编写的代码：
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>回答 3
Stack Overflow用户
发布于 2014-05-26 23:05:11
只需在<div>中添加水style="display:none";
小提琴我说：http://jsfiddle.net/krY56/13/
jQuery：
function toggler(divId) {
$("#" + divId).toggle();
}希望有一个CSS类.hidden
.hidden {
display:none;
}Stack Overflow用户
发布于 2014-05-26 23:09:01
试试这个：
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>Stack Overflow用户
发布于 2017-04-20 04:51:53
我意识到这个问题有点过时了，因为它出现在谷歌搜索类似的问题上，我想我会在@CowWarrior的答案之上再扩展一点。我一直在寻找一些类似的解决方案，在浏览了无数的SO问题/答案和Bootstrap文档之后，解决方案非常简单。同样，这将使用内置的Bootstrap collapse类来显示/隐藏div和Bootstrap的“折叠事件”。
我意识到，使用Bootstrap Accordion很容易做到这一点，但大多数时候，尽管所需的功能“有点”类似于Accordion，但它的不同之处在于，人们希望根据navbar上的菜单按钮来显示hide <div>。下面是一个简单的解决方案。锚标签(<a>)可以是导航栏项目，并且基于折叠事件，相应的div将替换现有的div。它在CodeSnippet中看起来有点草率，但它非常接近实现功能-
JavaScript所做的就是使用以下命令隐藏所有其他<div>
$(".main-container.collapse").not($(this)).collapse('hide');
当通过检查折叠事件shown.bs.collapse显示加载的<div>时。以下是Bootstrap documentation on Collapse事件。
注意：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>
https://stackoverflow.com/questions/23873005
复制相似问题