Einfache JQuery Alle Erweitern Alle Reduzieren Wechseln

Bin ich auf-und Zuklappen divs. Auch ich lasse alle erweitern und alle reduzieren. Das problem ist, wenn ein div ist bereits erweitert, wenn der Benutzer auf alle erweitern, die erweiterte div wird zugeklappt, während die anderen divs zu erweitern (und Umgekehrt). Wie kann ich die erweitern alle divs, die nicht bereits erweitert ist, und alle reduzieren, die divs, die nicht bereits zusammengebrochen.

$(document).ready(function(){
    $(".toggle_container").hide();

    //Expand/Collapse Individual Boxes
    $("span.expand_heading").toggle(function(){
        $(this).addClass("active"); 
        }, function () {
        $(this).removeClass("active");
    });
    $("span.expand_heading").click(function(){
        $(this).nextAll(".toggle_container:first").slideToggle("slow");
    });

    //Show hide 'expand all' and 'collapse all' text
    $(".expand_all").toggle(function(){
        $(this).addClass("expanded"); 
        }, function () {
        $(this).removeClass("expanded");
    });

    //expand or collapse all boxes
    $(".expand_all").click(function(){
        $(".toggle_container").slideToggle("slow");
    });
});

InformationsquelleAutor user1005793 | 2011-10-20

  1. 3
    //expand or collapse all boxes
    $(".expand_all").click(function(){
        if($(this).hasClass("expanded")){
           $(".toggle_container").slideDown("slow");
        }
        else {
           $(".toggle_container").slideUp("slow");
        }
    });

    Könnten Sie überprüfen, um zu sehen, ob Ihr expand_all-element hat die Klasse erweitert oder nicht, und schieben Sie alle Ihre Elemente nach oben oder unten, je nachdem.

    Das funktionierte perfekt! Vielen, vielen Dank!

    InformationsquelleAutor Keith.Abramo

  2. 2

    versuchen Sie, begrenzen Sie Ihre Auswahl, um nur versteckte Werte:

    $(".toggle_container:hidden").slideToggle("slow");

    http://api.jquery.com/hidden-selector/

    InformationsquelleAutor brian chandley

  4. 0

    Effektiver und efficeint Weg, dies zu tun wäre die folgende:

    $(document).ready(function ()
{
    var panels = $('.panel-collapse.collapse');
    var collapse = function()
    {
        if (!$(this).hasClass ('open')) return;
        $(this).slideUp().removeClass('open').removeClass('active');
    };
    $(".panel-heading").click (function()
    {
        var next = $(this).next();
        if (next.hasClass ('active')) return;
        panels.each (collapse);
        next.slideToggle().toggleClass('open').addClass('active');
    });
});

    Dieser Ansatz berücksichtigt die folgenden Punkte:

    • Speichern, die auch zerlegbar-panels in Variablen panels so dass wir nicht
      suchen Sie immer einen header geklickt wird.
    • Wenn ein header geklickt wird, wenn das Fenster bereits geöffnet, die wir nicht brauchen, etwas zu tun.
    • Wenn das zurücksetzen der pannels auf jeden Klick schließen wir nur die offenen und ignorieren den rest.

    JSFiddle

    InformationsquelleAutor razzak

Schreibe einen Kommentar