Я пытаюсь реализовать аккордеон внутри другого аккордеона, используя Twitter Bootstrap. Является ли это возможным? если да, то, пожалуйста, помогите мне с кодом, потому что я попытался реализовать его, но я не был успешным.
Аккордеон внутри аккордеона twitter bootstrap?
Ответ 1
Просто добавьте еще один аккордеон внутри 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>
Не забудьте использовать разные идентификаторы аккордеона.
Ответ 2
это работает более оперативно в 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>
Ответ 3
Я обнаружил, что решение от Alessandro не работает с Bootstrap 3. Вот рабочий (немного другой, без панели расширения по умолчанию). Если вам нужно, просто добавьте класс "в" ):
<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>
Ответ 4
Если вы используете события коллапса на вложенных складчатых элементах, это помогает остановить события коллапса от барботажа выше уровня групповой группы. В противном случае события коллапса, сработанные внутренними сворачивающимися элементами, достигнут внешних элементов, пытающихся обрабатывать события коллапса, запускаемые их собственными сворачиваемыми элементами, и вызывают неожиданное поведение.
$('.panel-group').on('show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse', function (e) {
e.stopPropagation();
});
В этом примере предполагается, что вы используете "panel-group" в качестве имени класса для группировки разборных элементов.