2012-09-28 10 views
6

Następujący kod akordeonu nie działa poprawnie dla mnie.Akordeon nie zwija się

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

Wyświetla i elementy rozwijać prawidłowo, ale rzeczy nie załamie. Po kliknięciu otwartego elementu zwija się krótko, a następnie rozszerza ponownie. Widziałem to zachowanie na bootstrap wersji 2.1.0 i 2.1.1. Ponadto używam JQuery 1.7.2 i 1.8.2 i przeglądam w przeglądarce Chrome 22.

+1

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

+1

Działa dobrze dla mnie. Jak wygląda twoja sekcja głowy? Wspomniałeś, że używasz dwóch wersji jquery, dlaczego? Ponadto, jakie wersje bootstrap js włączasz? poszczególne wtyczki lub pakiet wtyczek? –

+0

Tak, dla mnie działało dobrze na jsfiddle, ale nadal nie działa na mojej stronie. Nie używam dwóch wersji jednocześnie. Chciałem tylko, aby ludzie wiedzieli, że próbowałem tego i mam ten sam problem z dwiema różnymi wersjami bootstrapu i dwiema różnymi wersjami JQuery. – mightybyte

Odpowiedz

21

Problem polegał na tym, że przypadkowo włączyłem wszystkie pliki skryptów javascript dwa razy. Usunięcie duplikatu naprawiło wszystko. Nie wiem, jak powszechny jest ten błąd, ale jeśli ktoś inny będzie miał ten problem w przyszłości, pomocna może okazać się odpowiedź, a nie tylko usunięcie pytania.

+1

Po godzinie debugowania klasy Collapse odkryłem ten sam problem z podwójnym obciążeniem, jaki miałeś. Używam twitter-bootstrap-rails, aby dołączyć bootstrap. – jspooner

+0

Przeszliśmy przez to samo menu, które wymaga bootstrap.js, a następnie za pomocą polecenia wymaga ponownego załadowania go w aplikacji. Pracowaliśmy nad nią, posługując się rozszerzeniem/zwijaniem akordeonu, używając jawnego javascript w naszej aplikacji, zamiast adnotacji danych. –

+0

Ten sam problem tutaj - spędził przynajmniej godzinę, może więcej, debugując to tylko po to, aby zdać sobie sprawę, że plik bootstrap.min.js został dołączony dwa razy z dwóch różnych plików. Naprawiłem to (nigdy nie przyszło mi to do głowy po przeczytaniu tego) i teraz działa idealnie. Dziękuję za to, że popełniłem ten błąd pierwszy i starałem się to udokumentować! – JToland

1

Miałem ten sam problem. Problem polegał na tym, że załadowałem jQuery po bootstrapie.

Powiązane problemy