Bootstrap 3 折叠手风琴:折叠所有作品，但无法在保持数据父级的同时展开所有作品
[英] Bootstrap 3 collapse accordion: collapse all works but then cannot expand all while maintaining data-parent
<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 id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
<div id="collapseThree" class="panel-collapse collapse"><div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
I'm using Bootstrap 3 and trying to setup the following accordion/collapse structure:
Onload: Each accordion panel in a group is fully collapsed and functions as documented/expected.
Button click: Each accordion panel expands and clicking the toggles has no effect (including URL anchor effects).
Another button click: All panels return to onload state; all collapsed and clickable as normal.
I've made it to step 2, but when I click the button again at step 3 it has no effect. I also see no console errors reported in Chrome Dev Tools or by running the code through my local JSHint.
I'd like this cycle to be repeatable each time the button is clicked.
Trying to open multiple panels of a collapse control that is setup as an accordion i.e. with the data-parent attribute set, can prove quite problematic and buggy (see this question on multiple panels open after programmatically opening a panel)
Instead, the best approach would be to:
Allow each panel to toggle individually
Then, enforce the accordion behavior manually where appropriate.
To allow each panel to toggle individually, on the data-toggle="collapse" element, set the data-target attribute to the .collapse panel ID selector (instead of setting the data-parent attribute to the parent control. You can read more about this in the question Modify Twitter Bootstrap collapse plugin to keep accordions open.
To manually enforce the accordion behavior, you can create a handler for the collapse show event which occurs just before any panels are displayed. Use this to ensure any other open panels are closed before the selected one is shown (see this answer to multiple panels open). You'll also only want the code to execute when the panels are active. To do all that, add the following code:
$('#accordion').on('show.bs.collapse', function () {
if (active) $('#accordion .in').collapse('hide');
});
Then use show and hide to toggle the visibility of each of the panels and data-toggle to enable and disable the controls.
$('#collapse-init').click(function () {
if (active) {
active = false;
$('.panel-collapse').collapse('show');
$('.panel-title').attr('data-toggle', '');
$(this).text('Enable accordion behavior');
} else {
active = true;
$('.panel-collapse').collapse('hide');
$('.panel-title').attr('data-toggle', 'collapse');
$(this).text('Disable accordion behavior');
}
});
