Bootstrap Collapse - Jquery Funzione "Collapse all"

Question

Sto scrivendo un lettore di feed personale utilizzando Bootstrap su frontend e volevo aggiungere un pulsante "Collapse/Espandi tutto".

È il mio primo codice JavaScript/JQuery, quindi non so come eseguirne il debug tranne la stampa delle variabili in Firefox Developer Console.

La struttura della mia pagina è composta da pannelli. L'utente può espandere o comprimere un pannello facendo clic sull'intestazione del pannello. E un pulsante per comprimere o espandere tutti i pannelli.

La mia soluzione funziona la maggior parte delle volte, ma ho notato uno strano comportamento. Ecco come ho riprodurre il problema:

1. Aprire la pagina prima volta
2. espandere un pannello con il clic sul suo colpo di testa
3. Ora il crollo tutta tasto crolla il pannello aperto, e si espande le altre. Come se "attivasse" tutti i pannelli invece di chiuderli.
4. Dopo questo strano comportamento, tutto è normale, non riesco a riprodurre il problema senza aggiornare la pagina. Su ogni passaggio la variabile open_panel_count sembra normale.

Ecco i metodi che sto usando:

$(function() { 
    open_panel_count = 0; 
    function update_toggle_button() { 
    $('#toggle-btn').text((open_panel_count ? "Collapse" : "Expand") + " All") 
    } 
    update_toggle_button(); // Run once on page load to text #toggle-btn 

    $('#toggle-btn').click(function() { 
    $('.panel-collapse').collapse(open_panel_count ? 'hide' : 'show'); 
    }); 

    $('.panel-collapse').on('shown.bs.collapse', function() { 
    open_panel_count++; 
    update_toggle_button(); 
    }); 

    $('.panel-collapse').on('hidden.bs.collapse', function() { 
    open_panel_count--; 
    update_toggle_button(); 
    }); 
}); 

Qualcuno mi può punto quello che sto facendo di sbagliato?

Si può vedere l'intero modello in: https://github.com/utdemir/furby/blob/master/template.erb e accedere a un demo a: http://p.cogunluklazararsiz.org/furby/

Answer 1

Secondo la documentazione Twitter Bootstrap, è può "attivare il tuo contenuto come elemento collassabile.", eseguendo:

$('.panel-collapse').collapse({ 
    toggle: false 
}); 

L'aggiunta di questo dovrebbe risolvere il problema. Provaci.

$(function() { 
    $('.panel-collapse').collapse({ 
    toggle: false 
    }); 

... 

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

Non certo perché il cinguettio JS non raccoglie la vostra data-target="#entry419294611" data-toggle="collapse". Difficile eseguire il debug senza un violino.

Answer 2

Provare a cambiare

$('#toggle-btn').click(function() { 
    $('.panel-collapse').collapse(open_panel_count ? 'hide' : 'show'); 
    }); 

Per

$('#toggle-btn').click(function() { 
    var state = open_panel_count ? 'hide' : 'show'; 
    $('.panel-collapse').collapse(state); 
    }); 

Answer 3

$('.panel-collapse').collapse('hide'); 

Bootstrap/JQuery Collapse