Bootstrap Collapse - Jquery "Collapse all" -Funktion

Question

Ich schreibe einen persönlichen Feed-Reader mit Bootstrap am Frontend und wollte einen "Collapse/Expand All" -Button hinzufügen.

Es ist mein erster JavaScript/JQuery-Code, daher weiß ich nicht, wie ich ihn debuggen kann, außer Variablen in der Firefox Developer Console zu drucken.

Meine Seitenstruktur besteht aus Panels. Der Benutzer kann ein Panel erweitern oder reduzieren, indem er auf den Panel-Header klickt. Und eine Schaltfläche, um alle Panels zu reduzieren oder zu erweitern.

Meine Lösung funktioniert die meiste Zeit, aber ich bemerkte ein seltsames Verhalten. Hier ist, wie ich das Problem reproduzieren:

1. Öffnen Sie die Seite erstmals
2. erweitern ein Panel mit einem Klick seinen Kopf
3. nun den Zusammenbruch all Taste bricht die offene Panel, und erweitert die anderen. Als ob es alle Paneele "toggelt", anstatt sie zu schließen.
4. Nach diesem seltsamen Verhalten ist alles normal, ich kann das Problem nicht reproduzieren, ohne die Seite zu aktualisieren. Auf jedem Schritt open_panel_count Variable sieht normal aus.

Hier ist die Methoden Ich verwende:

$(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(); 
    }); 
}); 

Kann mir jemand zeigen, was ich falsch mache?

können Sie die ganze Vorlage sehen in: https://github.com/utdemir/furby/blob/master/template.erb Und eine Demo zugreifen: http://p.cogunluklazararsiz.org/furby/

Answer 1

Nach der Twitter Bootstrap Dokumentation, Sie kann "Ihren Inhalt als reduzierbares Element aktivieren", indem Sie Folgendes ausführen:

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

Das Hinzufügen sollte das Problem lösen. Probieren Sie es aus.

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

... 

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

nicht sicher, warum die twitter JS ist nicht Kommissionierung Ihre data-target="#entry419294611" data-toggle="collapse" auf. Schwer zu debuggen ohne eine Geige.

Answer 2

Versuchen

Ändern

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

Für

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

Answer 3

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

Bootstrap/JQuery Collapse