Html Bootstrap 手风琴 - 开始全部关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37547689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Accordion - start all closed
提问by becca
So I have a bootstrap style accordion on my page - but on start, the first panel is open. How can i make it so that when you load the page, they are all closed?
所以我的页面上有一个引导式手风琴 - 但一开始，第一个面板是打开的。我怎样才能使加载页面时它们都关闭？
Any help would be really appreciated! Thanks so much!
任何帮助将非常感激！非常感谢！
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="fa fa-minus text-primary"></i> Overview</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse in">
<div class="panel-body">Contents panel 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> Utilities</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">Contents panel 2</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> Organization</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">Contents panel 3</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="fa fa-plus text-primary"></i> Integrations</a>
</h4>
</div>
<div id="panel4" class="panel-collapse collapse">
<div class="panel-body">Contents panel 3</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel5"><i class="fa fa-plus text-primary"></i> Essentials</a>
</h4>
</div>
<div id="panel5" class="panel-collapse collapse">
<div class="panel-body">Contents panel 3</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel6"><i class="fa fa-plus text-primary"></i> Sales</a>
</h4>
</div>
<div id="panel6" class="panel-collapse collapse">
<div class="panel-body">Contents panel 3</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel7"><i class="fa fa-plus text-primary"></i> Support</a>
</h4>
</div>
<div id="panel7" class="panel-collapse collapse">
<div class="panel-body">Contents panel 3</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel8"><i class="fa fa-plus text-primary"></i> Projects</a>
</h4>
</div>
<div id="panel8" class="panel-collapse collapse">
<div class="panel-body">Contents panel 3</div>
</div>
</div>
</div>
回答by Steven B.
Boostrap 3
助推器 3
Just remove .infrom panel1.
只需.in从面板 1 中删除即可。
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">Contents panel 1</div>
</div>
Bootstrap 4
引导程序 4
See @Syed Sajid's answer
见@Syed Sajid的回答
回答by Syed Sajid
Bootstrap 4 and 4+ remove class showfrom collapse show
Bootstrap 4 和 4+show从collapse show
<div class="collapse">
<div class="card-body"></div>
</div>
回答by maelga
With Boostrap 4, the collapse is closed by default. If you want it to show the content on page load, you can simply add the class show:
使用 Boostrap 4，默认情况下折叠是关闭的。如果您希望它在页面加载时显示内容，您只需添加类show：
<div class="collapse">...</div> //Content is hidden on page load
<div class="collapse show">...</div> //Content is shown on page load
As per Bootstrap 4 documention:
.collapsehides content.collapse.showshows content
.collapse隐藏内容.collapse.show显示内容
回答by caras
you must add, in the header
您必须在标题中添加
aria-expanded="true"
and, in the body
并且，在体内
class="collapse show"
