2016-06-01 3 views
0

Ich habe eine Akkordeon-Effekt auf meiner Website mit Twitter Bootstrap wie http://getbootstrap.com/javascript/#collapse-example-accordion.Klasse hinzufügen zu Akkordeons div Wrapper, wenn alle Akkordeons Panes zusammenfallen (mit Twitter Bootstrap)

Makeln die Paneele geöffnet und geschlossen scheint nicht eine Klasse zur Mutter Elemente hinzufügen, werden nur die .panel Rubriken und .panel-kollabiert ...

Ich will es eine Klasse der hinzufügen Übergeordnetes Element (div.bs - Beispiel im Beispiel der Dokumentation), wenn alle Bereiche des Akkordeons geschlossen/zugeklappt sind.

Hat Bootstrap eine Option dafür?

Wenn nicht, wie es scheint, nicht zu hart sein würde, zu erreichen ...

  • auf Klick/eine offene .panel-heading hinzufügen class="all-closed" an das Mutterelement kollabiert
  • auf Klick/eine unbe Öffnung geöffnet .panel-heading"all-closed" Klasse entfernen (falls vorhanden)

Aber vielleicht hat Bootstrap eine Option für das? Oder hat jemand vielleicht ein jQuery-Beispiel, um mich in die richtige Richtung zu bringen?

Antwort

0

Irgendwann bekam ich etwas Janky Code fast zu arbeiten ... und gerade jetzt entdeckt, dass ich die .on Methode verwenden musste, damit es wirklich funktioniert.

Meine Lösung sah wie folgt aus:

$('.panel-group').on('click', 'a[data-toggle="collapse"]:not(".collapsed")', function() { 
    $('.panel-group').addClass('allPanesClosed'); 
}); 
$('.panel-group').on('click', 'a[data-toggle="collapse"].collapsed', function() {      
    $('.panel-group').removeClass('allPanesClosed'); 
}); 
Verwandte Themen