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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。