Bootstrap-Kollaps Daten-Eltern funktioniert nicht

Question

Ich benutze Bootstrap 2.2.1 und aus irgendeinem Grund das Data-Elternattribut tut nicht, was beabsichtigt ist. Ein zuvor geöffnetes Ziel wird nicht geschlossen, wenn ich auf ein anderes Ziel klicke. Hier ist eine fiddle mit dem Code unten, irgendwelche Ideen, wie das zu beheben?

<div id="accordion"> 
    <ul> 
     <li> 
      <a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a> 
      <ul id="document" class="collapse"> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">option 2</a> 
     </li> 
     <li> 
      <a href="#">option 3</a> 
     </li> 
     <li> 
      <a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a> 
      <ul id="document2" class="collapse"> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

ich nicht diese entweder an die Arbeit könnte - dies mit der Tatsache, etwas in der Bootstrap JS sein können, dass Sie eine Liste anstatt divs verwenden?

Um es zur Arbeit zu bringen, musste ich das Klickereignis überschreiben. Auf der Grundlage dieser Frage hier: Collapsible accordion doesn't work inside a dropdpwn-menu Bootstrap

Ich habe eine accordion-toggle Klasse zu jeder Option Link, und dann hinzugefügt, um die folgenden JavaScript, um es an die Arbeit:

$(document).on('click', '.accordion-toggle', function(event) { 
     event.stopPropagation(); 
     var $this = $(this); 

     var parent = $this.data('parent'); 
     var actives = parent && $(parent).find('.collapse.in'); 

     // From bootstrap itself 
     if (actives && actives.length) { 
      hasData = actives.data('collapse'); 
      //if (hasData && hasData.transitioning) return; 
      actives.collapse('hide'); 
     } 

     var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7 

     $(target).collapse('toggle'); 
});​ 

Diese fiddle zeigt sie in Aktion.

Answer 2

habe auch mit Bootstrap-Kollaps gekämpft. Ich habe versucht, etwas etwas anderes zu tun. Ich wollte Inline-Toggle-Verhalten. Siehe meine JS Geige unten. Was ich gefunden habe ist, dass Bootstrap das Vorhandensein der "Akkordeon-Gruppe" div zusätzlich zu dem Daten-Eltern-Attribut in ihren Dokumenten erfordert. Entweder gibt es einen Fehler in der JS oder ihre Dokumente enthalten ihn nicht. Ich hatte auch aus den Stilen auf der Akkordeon-Gruppe div auf Null ...

http://jsfiddle.net/cssguru/SRFFJ/

<div id="accordion2"> 
    <div class="accordion-group" style="border:0;padding:0;margin:0"> 
     <div id="collapseOne" class="collapse in"> 
      Foo Bar... 
      <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       Show Herp Derp 
      </a> 
     </div> 
     <div id="collapseTwo" class="collapse"> 
      Herp Derp... 
      <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
       Show Foo Bar 
      </a> 
     </div> 
    </div> 
</div> 

Answer 3

Sie müssen Akkordeon-Gruppe Klasse in Ihrem Artikel verwenden, siehe Ausgabe https://github.com/twitter/bootstrap/issues/4988

Answer 4

Es sagt in den Bootstrap Dokumente:

Wenn ein Selektor vorgesehen ist, dann sind alle Elemente unter dem zusammenklappbaren angegebenen übergeordneten wird geschlossen, wenn diese zusammenklappbare Artikel wird angezeigt. (ähnlich wie bei traditionellem Akkordeon Verhalten - dies ist abhängig von der panel Klasse)

so hat es mit Panel-Gruppen verwendet werden, aber Sie JavaScript ohnehin außer Kraft setzen können.

http://getbootstrap.com/javascript/#collapse-options