Javascript Jquery 手风琴默认不折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10145101/
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
Jquery accordion not collapse by default
提问by user782104
I am using collapse plugin provided by bootstrap which is a jquery simple plugin
我正在使用 bootstrap 提供的折叠插件，这是一个 jquery 简单插件
However it collapse by default, how to modify so that the collapse item is hidden by default, only when i press the header, then the item collapse and show? Thank you
但是默认情况下它会折叠，如何修改以便默认情况下隐藏折叠项目，只有当我按下标题时，项目才会折叠并显示？谢谢
The document of the plugin, just few line so it only takes one minute
$(document).ready( function () {
$(".collapse").collapse()({
toggle: false,
show: false
});
} );
This is the html:
这是html：
<div class="accordion-group">
<div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">
Collapsible #1
</div>
<div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
content1
</div>
<div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">
Collapsible #2
</div>
<div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
content2
</div>
回答by Huntario
For Bootstrap 3, some things have changed. The following code accomplishes your desired functionality in Bootstrap 3
对于 Bootstrap 3，有些事情发生了变化。以下代码在 Bootstrap 3 中完成了您想要的功能
If you want the panel body to show by default:
如果您希望面板主体默认显示：
<div id="collapseOne" class="panel-collapse collapse in">
If you want the panel body to hide by default:
如果您希望面板主体默认隐藏：
<div id="collapseOne" class="panel-collapse collapse">
Here is an example:
下面是一个例子：
<div class="bs-example">
<div class="panel-group" id="accordion">
<!- Repeat For Next Panel------->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
xxxxxxxxxxxHERE IS THE HEADER CONTENTSxxxxxxxxxxxx
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
xxxxxxxxxxxHERE IS THE BODY CONTENTSxxxxxxxxxxxx
</div>
</div>
</div>
<!- Repeat For Next Panel---(but change <div id="collapseTwo")--->
</div>
</div>
回答by Bhargav Chudasama
<div class="accordion-group collapse">
<div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">
Collapsible #1
</div>
<div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
content1
</div>
<div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">
Collapsible #2
</div>
<div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
content2
</div>
</div>
