bootstrap最初是折叠元素

Question

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

如何在首次看到页面时(加载时)关闭切换？

<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为手风琴div.

Demo

因此,在你定义它的手风琴时,只需从div中删除"in"类,如下所示.每当你扩展一个accorion时,它只是添加"in"类以使其可见.

如果你使用"in"引导页面来查找类,它会使div的高度为:auto,如果它不存在,它将为零高度.

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

Answer 2

你需要从"崩溃"中删除"in"

Answer 3

另一个解决方案是将toggle = false添加到折叠目标,这将阻止它随机打开和关闭,如果您只是删除"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

只需将类“show”添加到折叠元素的类中，bootstrap 将使用 js 动态删除它以折叠并显示