68

ブートストラップテンプレートを使用していますが、デフォルトでアコーディオンが機能する方法を変更したいと考えています。

ページが最初に表示されたとき (読み込み時) にトグルを閉じるにはどうすればよいですか?

<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>
4

9 に答える 9

94

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

Demo

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

「in」ブートストラップでページをレンダリングすると、クラスが検索され、div の height:auto が作成されます。存在しない場合は、高さがゼロになります。

<div id="collapseOne" class="accordion-body collapse">
于 2013-04-22T22:45:28.490 に答える
41

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

于 2013-04-22T22:15:47.727 に答える
12

別の解決策は、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>
于 2014-06-20T14:41:35.007 に答える
1

クラスからショーを削除する必要があります:

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

それはする必要があります

<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
于 2019-09-10T08:07:28.433 に答える
-2

私の場合のように、クラスを削除してinもうまくいかない場合は、CSS 表示プロパティを使用して折りたたまれた初期状態を強制できます。

...
<div id="collapseOne" class="accordion-body collapse" style="display: none;">
...
于 2016-08-24T04:51:05.443 に答える