2012-09-28 8 views
6

Der folgende Akkordeon Code funktioniert nicht richtig für mich.Akkordeon fällt nicht zusammen

<div class="accordion" id="accordion1"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" 
      data-parent="#accordion1" href="#note1"> 
      Foo 
     </a> 
     </div> 
     <div class="accordion-body collapse" id="note1"> 
     <div class="accordion-inner"> 
      <pre>Foo body</pre> 
     </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" 
      data-parent="#accordion1" href="#note2"> 
      Bar 
     </a> 
     </div> 
     <div class="accordion-body collapse" id="note2"> 
     <div class="accordion-inner"> 
      <pre>Bar body</pre> 
     </div> 
     </div> 
    </div> 
</div> 

Es wird angezeigt und die Elemente werden ordnungsgemäß erweitert, aber die Elemente werden nicht minimiert. Wenn ich auf ein geöffnetes Objekt klicke, wird es kurz geschlossen und dann wieder erweitert. Ich habe dieses Verhalten in Bootstrap-Versionen 2.1.0 und 2.1.1 gesehen. Außerdem verwende ich JQuery 1.7.2 und 1.8.2 und Anzeige in Chrom 22.

+1

http://jsFiddle.net ;-) – yckart

+1

Funktioniert gut für mich. Wie sieht dein Kopfbereich aus? U erwähnt, dass Sie zwei Versionen von Jquery verwenden, warum? Auch, welche Versionen des Bootstraps js gehören Sie? einzelne Plugins oder das Plugin-Pack? –

+0

Ja, es hat für mich auch auf jsfiddle funktioniert, funktioniert aber immer noch nicht auf meiner Seite. Ich verwende nicht zwei Versionen gleichzeitig. Ich wollte nur, dass die Leute wissen, dass ich es ausprobiert habe und das gleiche Problem mit zwei verschiedenen Versionen von Bootstrap und zwei verschiedenen Versionen von JQuery habe. – mightybyte

Antwort

21

Das Problem endete damit, dass ich versehentlich alle meine JavaScript-Skriptdateien zweimal aufgenommen hatte. Das Entfernen des Duplikats hat alles repariert. Ich weiß nicht, wie häufig dieser Fehler ist, aber wenn jemand anderes dieses Problem in der Zukunft hat, dann könnte es hilfreich sein, diese Antwort zu haben, anstatt nur die Frage zu löschen.

+1

Nach einer Stunde Debugging der Collapse-Klasse entdeckte ich das gleiche Problem mit der doppelten Ladung. Ich benutze twitter-bootstrap-rails um bootstrap einzubinden. – jspooner

+0

Wir haben dasselbe über ein Menü ausgeführt, das bootstrap.js benötigt, und dann require, um es in der App neu zu laden. Wir haben daran gearbeitet, indem wir das Akkordeon erweitern/reduzieren, indem wir explizites JavaScript in unserer App anstelle von Datenannotationen verwendet haben. –

+0

Gleiches Problem hier - verbrachte mindestens eine Stunde, vielleicht mehr, debugging dies nur um zu erkennen, dass bootstrap.min.js wurde zweimal aus zwei verschiedenen Dateien enthalten. Ich habe das korrigiert (fiel mir erst nach dem Lesen auf) und jetzt funktioniert es perfekt. Danke, dass du diesen Fehler zuerst gemacht hast und denkst, es zu dokumentieren! – JToland

1

Ich hatte das gleiche Problem. Das Problem war, dass ich jQuery nach Bootstrap geladen.