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.
问问题
46824 次
4 回答
29
只需在 div 中包含另一个手风琴，其类手风琴内部：
<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>
请记住使用不同的手风琴ID。
于 2013-09-02T10:28:29.963 回答
16
这在 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>
于 2014-10-09T14:12:27.053 回答
10
我发现 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>
于 2014-02-24T10:14:44.017 回答
1
如果您在嵌套的可折叠元素上使用折叠事件，它有助于阻止折叠事件在面板组级别之上冒泡。否则内部可折叠元素触发的折叠事件将到达外部元素，试图处理它们自己的可折叠元素触发的折叠事件，并导致意外行为。
$('.panel-group').on('show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse', function (e) {
e.stopPropagation();
});
此示例假定您使用“panel-group”作为类名来对可折叠元素进行分组。
于 2017-06-12T14:01:13.803 回答