Question

如何创建一个bootstrap手风琴，当折叠时会折叠两个或更多“儿童”手风琴？（而不是下面的网站演示中的一个）。

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

Answer 1

带有“儿童”手风琴的bootstrap手风琴：
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>

bootstrap手风琴折叠多个孩子？

1 个答案: