web-dev-qa-db-ja.com

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>
htmlcsstwitter-bootstraptoggle
60
JoshuaJeanThree

アコーディオンを展開または折りたたむと、クラス「in」が追加/削除され、height:autoまたは0がアコーディオンdivに設定されます。

Demo

したがって、アコーディオンで定義するときは、次のようにdivから「in」クラスを削除するだけです。アコーディオンを展開するたびに、「in」クラスが追加されて表示されます。

「in」でページをレンダリングする場合、bootstrapはクラスを探し、divのheight：autoを作成します。存在しない場合は、ゼロの高さになります。

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

「折りたたみ」から「in」を削除する必要があります

35
elektrorl

別の解決策は、折りたたみターゲットに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>
11
aqm

折りたたみ要素のクラスにクラス「show」を追加するだけで、bootstrapはjsを動的に使用して削除し、折りたたんで表示します

1
Tonui

「card-body」の前にdivにクラスhideを追加したところ、デフォルトで非表示になりました。

<div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordion">

0
Igor Pavlenko