1

折りたたまれたときに2つ以上の「子」アコーディオンを折りたたむブートストラップアコーディオンを作成する方法は? (以下の Web サイトのデモのように 1 つだけではありません)。

http://twitter.github.com/bootstrap/javascript.html#collapse

4

1 に答える 1

5

「子」アコーディオンを使用したブートストラップ アコーディオン:
http://jsfiddle.net/MasterAlex/a8pVJ/113/

<div class="accordion" id="accordion1">
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
            Collapsible Group Item #1 </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
        <div class="accordion-inner">
            collapseOne text
            <div class="accordion" id="accordion2">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneOne">
                            Collapsible SubGroup Item #1 </a>
                    </div>
                    <div id="collapseOneOne" class="accordion-body collapse" style="height: 0px;">
                        <div class="accordion-inner">
                            collapseOneOne text
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneTwo">
                            Collapsible SubGroup Item #2 </a>
                    </div>
                    <div id="collapseOneTwo" class="accordion-body collapse" style="height: 0px;">
                        <div class="accordion-inner">
                            collapseOneTwo text
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneThree">
                            Collapsible SubGroup Item #3 </a>
                    </div>
                    <div id="collapseOneThree" class="accordion-body collapse">
                        <div class="accordion-inner">
                            collapseOneThree text
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
            Collapsible Group Item #2 </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
        <div class="accordion-inner">
            collapseTwo text
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">
            Collapsible Group Item #3 </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
        <div class="accordion-inner">
            collapseThree text
        </div>
    </div>
</div>

于 2012-10-24T21:27:59.520 に答える