Bootstrap Collapse non passare dopo di visualizzare, nascondere o passare dal codice

Question

mio HTML è:

<div id="accordion-container"> 
    <div class="accordion" id="navaccordion"> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseMenu"> 
        <strong>My Menus</strong> 
       </a> 
      </div> 
      <div id="collapseMenu" class="accordion-body collapse in"> 
       <div class="accordion-inner"> 
        <div class="navigation" id="navigationcontainer"> 
         <span id="menutree"> 
          MenuTree 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQuickLinks"> 
        <strong>Quick Links</strong> 
       </a> 
      </div> 
      <div id="collapseQuickLinks" class="accordion-body collapse"> 
       <div class="accordion-inner"> 
        <div class="quicklinks" id="quicklinkscontainer"> 
         <span id="quicklinkslist"> 
          QuickLinks 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQueue"> 
        <strong>Queue</strong> 
       </a> 
      </div> 
      <div id="collapseQueue" class="accordion-body collapse"> 
       <div class="accordion-inner"> 
        <div class="queue" id="queuecontainer"> 
         <span id="queuetree"> 
          Queue 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Il mio esempio è qui: http://jsfiddle.net/pdavis68/Xut4C/2/

Se si rimuove il codice JavaScript, noterete che la commutazione del collasso funzioni correttamente. Se fai clic su "Collegamenti rapidi", "I miei menu" si chiude e si apre "Collegamenti rapidi".

Se si lascia il JS, si noterà che l'apertura di "I miei menu" o "Collegamenti rapidi" non provoca il collasso di qualcos'altro, ma se si apre "Coda", ciò causerà comunque il blocco degli altri crollo.

Non sembra importare se utilizzo il comando "toggle", "show" o "hide" nella compressione, interromperà la funzionalità di commutazione.

Inoltre, nell'esempio, ciò che dovrebbe accadere (secondo me, almeno) è che "I Miei Menu" dovrebbe essere chiuso (cosa che fa) e quindi i "Collegamenti rapidi" dovrebbero essere aperti (che non fa)

Quindi, 2 domande:.

1. Come posso mostrare a livello di codice/nascondere gruppi senza rompere la funzionalità di commutazione?

2. Come attivare/disattivare le cose?

Answer 1

1.Try utilizzare collapse() con le opzioni, il 'parent' è importante

$("#collapseMenu").collapse({"toggle": true, 'parent': '#navaccordion'}); 
$("#collapseQuickLinks").collapse({"toggle": true, 'parent': '#navaccordion' }); 

Fiddle: http://jsfiddle.net/hieuh25/Xut4C/6/

2.Basically si hanno 2 modi:

• Add classe in a quel div, ad esempio: <div id="collapseMenu" class="accordion-body collapse in"> causa l'apertura di questo div.

• Utilizzare collapse() con l'opzione 'toggle': true come sopra, quando il div è chiuso.

Spero che sia d'aiuto.

Answer 2

È inoltre possibile aggiungere data-parent="#navaccordion"-<div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion"> e chiamare senza addional chiave 'parent' come .collapse({"toggle": true});

Answer 3

provare ad attivare il contenuto come un elemento comprimibile prima. Ho sfogliato questa parte durante la lettura della documentazione e mi ha davvero bloccato.

$('#myCollapsible').collapse({ 
    toggle: false 
}) 

Dopo averlo attivato, è possibile nasconderlo e mostrarlo come al solito.

$('#myCollapsible').collapse('hide'); 
$('#myCollapsible').collapse('show'); 

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