引导手风琴折叠多个孩子？答案

【问题标题】：bootstrap Accordion collapse multiple children?引导手风琴折叠多个孩子？
【发布时间】：2012-10-23 05:07:29
【问题描述】：

如何创建一个 bootstrap 手风琴，在折叠时会折叠两个或多个“子”手风琴？（而不是像下面的网站演示那样只有一个）。

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

【问题讨论】：

折叠插件可以通过data-parent属性将打开的手风琴数量限制为1。您能否更明确地说明您想要打开/关闭多少手风琴以及它们各自的行为？在任何情况下，您都可以轻松地将自己的处理程序绑定到任何折叠事件。

标签： javascript twitter-bootstrap accordion

【解决方案1】：

用“儿童”手风琴引导手风琴：
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>

【讨论】：