Załamanie Bootstrap za pomocą tylko jednego pokazanego elementu

Question

Próbuję użyć składników zwinięcia Bootstrap.

Działa dobrze, ale zauważyłem, że czasami nie zamyka wszystkich pozostałych elementów; kiedy klikam w kolejności od pierwszego do trzeciego, a następnie z powrotem do pierwszego, trzeci pozostaje otwarty.

Moje oznaczenie jest takie samo jak przykładowy kod udostępniany przez Bootstrap, ponieważ właśnie testuję na teraz.

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

     <div class="accordion-group"> 
      <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       Collapsible Group Item #2 
      </a> 
      </div> 
      <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
      Part 2 
      </div> 
      </div> 
     </div> 

     <div class="accordion-group"> 
      <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
       Collapsible Group Item #3 
      </a> 
      </div> 
      <div id="collapseThree" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
       Part 3 
      </div> 
      </div> 
    </div> 

Kod JavaScript jest taka:

$(".collapse").collapse("#accordion2"); 

Zważywszy, że myślę, że aby skorzystać z tej składników w menu, aby pokazać grupę otwarte zgodnie z PHP zmiennej mogę tylko trzeba wydrukować klasę w na divcollapseOne/// i tak dalej?

Answer 1

Nie potrzebujesz części javascript, w rzeczywistości - usunąć to !! Właśnie ten kod powoduje dziwne zachowanie - accordion2 jest inicjowane dwukrotnie, co daje podwójny zestaw "logiki". Twój problem jest w pełni odtwarzalny za pomocą javascript lub nie.

Ogólnie rzecz biorąc, jeśli chodzi o bootstrap Twittera, kiedy umieścisz wszystkie swoje dane i funkcję powiązania w data attributes, tak jak to zrobiliście tutaj, nigdy nie będziecie musieli wykonywać javascript. TB wykonuje zadanie automatycznie po załadowaniu strony, szukając tych data attributes.

Rozważ javascript jako drugą opcję, alternatywny sposób, gdy nie możesz zrobić, co chcesz, po prostu wysyłając adres data attributes.

Answer 2

Jeśli dokonaniu znaczników według bootstrap collapse docs można to osiągnąć za pomocą następującego kodu jQuery:

$(document).on('click', '.accordion-toggle', function(e) { 
    event.preventDefault(); 

    $('#accordion2').find('.accordion-body').collapse('hide'); 
    $(this).parent().next().collapse('show'); 
});