twitter-bootstrap Accordion Inside Accordion twitter bootstrap？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18558941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accordion Inside Accordion twitter bootstrap?
提问by avinashizhere
I'm trying to implement an accordion inside another accordion using Twitter Bootstrap. Is it possible? if so, then please help me with the code because i tried implementing it but I wasn't successful.
我正在尝试使用 Twitter Bootstrap 在另一个手风琴中实现一个手风琴。是否可以？如果是这样，那么请帮助我编写代码，因为我尝试实现它但没有成功。
回答by Alessandro Alessandra
Simply include another accordion inside the div with the class accordion-inner:
只需在 div 中包含另一个手风琴，并使用类 Accordion-inner：
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Collapsible Group #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
This is a simple accordion inner content...
</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 #2 (With nested accordion inside)
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<!-- Here we insert another nested accordion -->
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
Collapsible Inner Group Item #1
</a>
</div>
<div id="collapseInnerOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
Collapsible Inner Group Item #2
</a>
</div>
<div id="collapseInnerTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
</div>
Remember to use different accordion ids.
请记住使用不同的手风琴 ID。
回答by Francesco
this is working more fluidly in Bootstrap v3.2.0
这在 Bootstrap v3.2.0 中工作得更流畅
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
This is a simple accordion inner content...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
Collapsible Group #2 (With nested accordion inside)
</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- Here we insert another nested accordion -->
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
Collapsible Inner Group Item #1
</a></h4>
</div>
<div id="collapseInnerOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
Collapsible Inner Group Item #2
</a></h4>
</div>
<div id="collapseInnerTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
</div>
回答by Massimiliano Arione
I found that solution from Alessandro is not working with Bootstrap 3. Here is a working one (slightly different, with no default expanded panel. If you need any, just add "in" class):
我发现 Alessandro 的解决方案不适用于 Bootstrap 3。这是一个有效的解决方案（略有不同，没有默认的扩展面板。如果需要，只需添加“in”类）：
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-body collapse">
<div class="panel-inner">
This is a simple accordion inner content...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
Collapsible Group #2 (With nested accordion inside)
</a></h4>
</div>
<div id="collapseTwo" class="panel-body collapse">
<div class="panel-inner">
<!-- Here we insert another nested accordion -->
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
Collapsible Inner Group Item #1
</a></h4>
</div>
<div id="collapseInnerOne" class="panel-body collapse">
<div class="panel-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
Collapsible Inner Group Item #2
</a></h4>
</div>
<div id="collapseInnerTwo" class="panel-body collapse">
<div class="panel-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
</div>
回答by Sorin
If you use collapse events on nested collapsible elements it helps stopping collapse events from bubbling up above panel-group level. Otherwise collapse events fired by inner collapsible elements will reach to outer elements trying to handle collapse events fired by their own collapsible elements, and cause unexpected behavior.
如果您在嵌套的可折叠元素上使用折叠事件，它有助于阻止折叠事件在面板组级别以上冒泡。否则内部可折叠元素触发的折叠事件将到达外部元素，试图处理由它们自己的可折叠元素触发的折叠事件，并导致意外行为。
$('.panel-group').on('show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse', function (e) {
e.stopPropagation();
});
This example presumes that you use "panel-group" as class name to group collapsible elements.
此示例假定您使用“panel-group”作为类名来对可折叠元素进行分组。
