bootstrap 最初崩溃的元素

问题描述

我正在使用 bootstrap 模板，我想改变 accordion 的工作原理。

当页面首次看到 (加载) 时，如何获得关闭的切换？

<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:auto 或 0 设置为手风琴 div 。

Demo

所以在手风琴定义它时，请从 div 中删除”in” 类，如下所示。每当你扩展一个 accorion 它只是添加”in” 类使其可见。

如果您使用”in” 引导页面来呈现该页面，则会查找该类，并且将使该 div 的高度为：auto，如果不存在，则它将处于零高度。

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

次佳解决方法

您需要从”collapse in” 中删除”in”

第三种解决方法

另一个解决方案是将 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>

参考文献

• bootstrap initially collapsed element

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。