1

私は次のコードを持っています：

<div id="container-collapse">
    <div class="row">
         <button type="button" class="span4 btn" data-toggle="collapse" data-target="#demo1" data-parent="container-collapse">Button1</button>
         <button type="button" class="span4 btn btn-danger" data-toggle="collapse" data-target="#demo2" data-parent="container-collapse">Button2</button>
    </div>
    <div class="row">
          <div id="demo1" class="collapse">Foo Bar</div>
          <div id="demo2" class="collapse">Herp Derp</div>
    </div>
</div>

私は一生の間、これらの折りたたみ要素を切り替えることができないので、一方が開くともう一方が閉じます。代わりに、一方のボタンをクリックしてからもう一方のボタンをクリックすると、両方の折りたたみ要素が開いたままになります。data-parent要素があると役立つと思いましたが、違います...ポインタに感謝しています。

4

1 に答える 1

1

あなたが望むものは、Twitter.Bootstrapでは「崩壊」または「アコーディオン」と呼ばれます。これをソリューションと比較するこのjsFiddleを参照してください。アコーディオンのコード：

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Show Foo Bar
</a>

        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">Foo Bar</div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
           <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Show Herp Derp</a>

        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">Herp Derp</div>
        </div>
    </div>
</div>

1行で2つのボタンを使用するには：

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div >
            <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Show Foo Bar</a> 
            <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Show Herp Derp</a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">Foo Bar</div>
        </div>
    </div>
    <div class="accordion-group">
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">Herp Derp</div>
        </div>
    </div>
</div>
于 2013-03-25T07:40:27.030 に答える