Ich verwende Bootstrap 3 und versuche die folgende Akkordeon / Collapse-Struktur einzurichten:

Onload: Jedes Akkordeonpanel in einer Gruppe ist vollständig eingeklappt und funktioniert wie dokumentiert / erwartet.

Tastenklick: Jedes Akkordeonbedienfeld wird vergrößert und das Klicken auf die Schalter hat keine Auswirkung (einschließlich URL-Ankereffekten).

Klicken Sie erneut auf die Schaltfläche: Alle Bedienfelder kehren in den Onload-Status zurück. alles kollabiert und klickbar wie gewohnt.

Ich habe es bis Schritt 2 geschafft, aber wenn ich in Schritt 3 erneut auf die Schaltfläche klicke, hat dies keine Auswirkung. Es werden auch keine Konsolenfehler in Chrome Dev Tools oder beim Ausführen des Codes über mein lokales JSHint gemeldet.

Ich möchte, dass dieser Zyklus bei jedem Klicken auf die Schaltfläche wiederholt werden kann.

Ich habe meinen Code hier eingerichtethttp://bootply.com/98140 und hierhttp://jsfiddle.net/A9vCx/

Ich würde gerne wissen, was ich falsch mache und freue mich über Vorschläge. Vielen Dank!

Mein 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>

Mein 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');
    }
  });

});