引导最初折叠的元素

我正在使用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> 

Answer 1

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

演示

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

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

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

Answer 2

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

Answer 3

另一个解决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> 

Answer 4

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

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