Rozwijanie akordeonu Bootstrap 3: zwijanie wszystkich prac, ale nie można rozwinąć wszystkich przy zachowaniu rodzica danych
Używam Bootstrap 3 i próbuję skonfigurować następującą strukturę akordeonu / zwinięcia:
Onload: Każdy panel akordeonu w grupie jest całkowicie zwinięty i ma funkcje zgodne z dokumentacją / oczekiwaniem.
Kliknięcie przycisku: Każdy panel akordeonu rozszerza się, a kliknięcie przełączników nie ma żadnego efektu (w tym efektów zakotwiczenia URL).
Kolejne kliknięcie przycisku: wszystkie panele powracają do stanu onload; wszystkie zwinięte i klikalne jak zwykle.
Udało mi się przejść do kroku 2, ale kiedy ponownie kliknę przycisk w kroku 3, nie ma to żadnego efektu. Nie widzę również żadnych błędów konsoli zgłoszonych w Narzędziach Dev Dev lub uruchamiając kod za pośrednictwem mojego lokalnego JSHint.
Chciałbym, aby ten cykl był powtarzalny za każdym kliknięciem przycisku.
Tutaj ustawiłem swój kodhttp://bootply.com/98140 i tuhttp://jsfiddle.net/A9vCx/
Chciałbym wiedzieć, co robię źle i doceniam sugestie. Dziękuję Ci!
Mój HTML:
<button class="collapse-init">Click to disable accordion behavior</button>
<br><br>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
</div>
Mój JS:
$(function() {
var $active = true;
$('.panel-title > a').click(function(e) {
e.preventDefault();
});
$('.collapse-init').on('click', function() {
if(!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$(this).html('Click to disable accordion behavior');
} else {
$active = false;
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$('.panel-title > a').removeAttr('data-toggle');
$(this).html('Click to enable accordion behavior');
}
});
});