引导最初折叠的元素

我正在使用bootstrap模板,并且想要改变手风琴默认的工作方式。

如何在第一次看到页面(加载时)时切换到closures状态?

<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Open!</a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="span6"> <div class="well well-small"> <div class="accordion-toggle"> ...some text... </div> </div> </div> <div class="span2"></div> </div> 

当您展开或折叠手风琴时,只需添加/删除“in”类,并将height:auto0设置为accordion div。

演示

所以在你的手风琴里,当你定义它时,只需从下面的div中删除“in”类。 每当你展开一个accorion时,它只是添加“in”类来使其可见。

如果你使用“in”渲染页面,bootstrap会寻找类,它会使div的高度:auto,如果不存在,它将处于零高度。

 <div id="collapseOne" class="accordion-body collapse"> 

你需要从“折叠”中删除“in”

另一个解决scheme是将toggle = false添加到合拢目标,这将停止随机打开和closures,如果您只是删除“in”

例如

 <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Open!</a> </div> <div id="collapseOne" class="accordion-body collapse" data-toggle="false" > <div class="span6"> <div class="well well-small"> <div class="accordion-toggle"> ...some text... </div> </div> </div> <div class="span2"></div> </div> 

如果删除in类并不适用于你,那么就是我的情况,你可以使用CSS display属性强制合并的初始状态:

 ... <div id="collapseOne" class="accordion-body collapse" style="display: none;"> ...