Attiva/disattiva Javascript con plug-in di compressione Bootstrap

Question

Provo ad utilizzare la funzione di attivazione e disattivazione del plug-in di compressione Bootstrap a livello di codice. Riesco a cambiare un div quando clicco sul collegamento in fisarmonica-intestazione ma funziona solo una volta, cioè non riesco a cliccare di nuovo per nascondere il div.

Ecco il mio codice:

<div id="accordion" class="accordion"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a id="program${bean.id}" data-parent="#accordion" 
        class="accordion-toggle"> 
      ... 
      </a> 
     </div> 
     <div id="collapse${bean.id}" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
      ... 
     </div> 
    </div> 
</div> 

E più tardi nel JSP:

$.each($('#accordion a.accordion-toggle'), function(i, link){ 
    $(link).on('click', 
     function(){ 
      // ... 
      $('#collapse' + id_of_a_bean).collapse({ 
       toggle : true, 
       parent : '#accordion' 
      }); 
      // ... 
     } 
    ) 
}); 

Mi sono perso qualcosa?

Answer 1

Immagino che questo sia successo a molte persone.

Quando si chiama la funzione collapse (FYI o qualsiasi funzione bootstrap), se si passa un oggetto significa che si avvia il collasso. L'opzione toggle commuta solo una volta in chiamata (doc).

È necessario chiamare una volta con i parametri e quindi chiamare solo con l'azione, come una stringa.

$.each($('#accordion a.accordion-toggle'), function(i, link){ 
    var $collapsible = $('#collapse' + id_of_a_bean); // Let's be thorough 

    $collapsible.collapse({ 
     toggle : true, // May not be necessary anymore 
     parent : '#accordion' 
    }); 

    $(link).on('click', 
     function(){ 
      // ... 
      $collapsible.collapse('toggle'); // Here is the magic trick 
      // ... 
     } 
    ); 
}); 

Demo online: http://jsfiddle.net/Sherbrow/uycBa/

Giusto per essere precisi, è possibile chiamare solo dopo che il processo init, in quanto interrompe se avete già fatto sullo stesso elemento. Ecco perché ha funzionato solo una volta.

Answer 2

Ho scoperto che invocare semplicemente il crollo due volte, una volta con il genitore e una volta senza, fa il trucco abbastanza bene - questa soluzione era preferibile nella mia soluzione a causa della gerarchia.

onclick=" 
$('@("#collapse" + lead.LeadId)').collapse({parent: '#accordion', toggle: true}); 
$('@("#collapse" + lead.LeadId)').collapse('toggle');" 

Answer 3

problema simile, mi basta controllare se l'elemento è visibile:

$("#myDiv").is(":visible") ? $("#myDiv").collapse('hide') : /*do nothing*/;