Twitter-Bootstrap Collapse Plugin - Wie kann das Öffnen mehrerer "Gruppen" ermöglicht werden?

70

Ich arbeite mit dem Collapse-Plugin und frage mich, wie ich es ermöglichen kann, dass mehrere Gruppen gleichzeitig geöffnet sind. Auf ihrer Demoseite:

http://twitter.github.com/bootstrap/javascript.html#collapse

Zu einem bestimmten Zeitpunkt darf nur einer geöffnet sein. Ich nehme an, dies ist das erwartete Verhalten von Akkordeons, aber wie kann ich es ändern, damit das Öffnen einer Gruppe die anderen nicht zusammenbricht?

twitter-bootstrap

— RobVious
quelle

156

Verwenden Sie nur keine data-parentAttribute:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>

    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">Item 1 Body</div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">Item 2 Body</div>
    </div>
  </div>
</div>

http://jsfiddle.net/HJf6j/2/

— Sody
quelle

8

Sie haben ungültiges HTML mit doppelten Element-IDs, Arbeitsbeispiel jsfiddle.net/esnt6ovr/2

— sody

12

Für eine Lösung, die jedes Panel abhängig erweitert / reduziert und mehrere Akkordeons auf jeder Seite zulässt.

Wenn alle Ihre Akkordeons und Gruppen eindeutige IDs haben, können Sie so viele Akkordeons auf der Seite haben, wie Sie möchten

Jedes Akkordeon benötigt eine eindeutige ID:

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">

Jede Überschrift benötigt eine eindeutige ID

<div class="panel-heading" role="tab" id="headingOne">

Jeder Körper benötigt eine eindeutige ID und gegebenenfalls eine Referenz die zu verwendende Überschrift

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

Beispiel für JSFiddle: http://jsfiddle.net/qnhd7Lu3/3/

— Dinamit
quelle

Ihre Antwort ist überhaupt nicht klar, was in diesem Code-Snippet vor sich geht. Bitte klären Sie.

— Jpaugh

@jpaugh ist das besser?

— Dinamite

Ja. Ich habe jedoch eine Frage: Was zeigt der riesige Codeblock am Ende? Jedes der zusammenklappbaren Elemente scheint sich gleich zu verhalten ... was den Text "Bestehende Tests" und "Nicht bestandene Tests" für mich sehr verwirrend macht

— jpaugh

@jpaugh Ich habe den Beispielcode in JSFiddle eingefügt. Die reduzierbaren Elemente sollten sich genauso verhalten. Sie tun dies nur nicht, wenn verschiedene Komponenten IDs gemeinsam nutzen, was das Javascript verwirrt, was häufig zu anderen Bedienfeldern führt als dem, auf das Sie beim

— Reduzieren

1

$('#multipleOPened').on('click', function() {
  if($(this).is(':checked')) {
    $('#accordion .collapse').removeAttr('data-parent');
  } else {
    $('#accordion .collapse').attr('data-parent','#accordion');
  }
});

Ein Beispiel mit Bootstrap 4 unter JSFiddle: https://jsfiddle.net/tw1j7Lf3/7/

— Regis TEDONE
quelle