Comprimere il bootstrap con un solo elemento mostrato

Question

Sto tentando di utilizzare i componenti di compressione di Bootstrap.

Funziona bene ma ho notato che a volte non chiude tutti gli altri elementi; quando clicco in ordine dal primo al terzo e poi di nuovo al primo, il terzo rimane aperto.

Il mio markup è lo stesso del codice di esempio fornito da Bootstrap, perché sto solo testando per ora.

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

Il codice JavaScript è questo:

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

Considerando che sto pensando di utilizzare questi componenti in un menu, al fine di mostrare un gruppo aperto in base al valore di una variabile PHP faccio solo stampare la classe in allo divcollapseOne/collapseTwo e così via?

Answer 1

Non è necessaria la parte javascript, infatti - rimuovere it !! È esattamente quel codice che causa lo strano comportamento: accordion2 viene inizializzato due volte risultando in un doppio insieme di "logica". Il tuo problema è completamente riproducibile usando javascript o no.

In genere, per quanto riguarda twitter bootstrap, quando è possibile inserire tutti i dati e le funzionalità di binding in data attributes, come hai fatto qui, non dovrai mai fare javascript. TB esegue automaticamente il lavoro quando la pagina viene caricata, cercando quelli data attributes.

Considerare javascript come una seconda opzione, in un modo alternativo, quando non si può fare ciò che si desidera semplicemente indirizzando lo data attributes.

Answer 2

Se avete fatto il vostro codice in base al bootstrap collapse docs è possibile raggiungere questo obiettivo con il seguente codice jQuery:

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

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