2013-03-29 14 views

回答

93

只要不使用data-parent属性:

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne"> 
     Collapsible Group Item #1 
     </a> 

    </div> 
    <div id="collapseOne" class="accordion-body collapse in"> 
     <div class="accordion-inner">Item 1 Body</div> 
    </div> 
    </div> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo"> 
     Collapsible Group Item #2 
     </a> 
    </div> 
    <div id="collapseTwo" class="accordion-body collapse"> 
     <div class="accordion-inner">Item 2 Body</div> 
    </div> 
    </div> 
</div> 

http://jsfiddle.net/HJf6j/2/

+2

如果你有不超过一个手风琴在同一页上这只适用。请参阅:http://jsfiddle.net/musium/esnt6ovr/1/ – musium

+4

你有无效的html与重复元素ids,工作示例http://jsfiddle.net/esnt6ovr/2/ – sody

9

对于扩展/每个面板依赖性崩溃并允许每个页面上的多个手风琴的解决方案。

如果你所有的手风琴和组具有唯一的ID,那么你可以有你想要

每个手风琴需要一个唯一的ID在页面上尽可能多的手风琴:

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true"> 

每个标题都需要一个唯一的ID

<div class="panel-heading" role="tab" id="headingOne"> 

每个身体需要一个唯一的ID,并且如果适用的基准的标题中使用

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 

实例上的jsfiddle:http://jsfiddle.net/qnhd7Lu3/3/

+0

你的答案并不完全清楚了解这段代码片段中发生了什么。请澄清。 – jpaugh

+0

@jpaugh这是更好吗? – dinamite

+0

是的。但是,我有一个问题:最后的巨大代码块会显示什么?每一个可折叠的元素似乎行为相同的方式...这使得文本“通过测试”和“失败的测试”我非常困惑 – jpaugh