Простой JQuery Развернуть все Свернуть все Переключить

Question

Я расширяю и сворачиваю div.Я также позволю расширить все и свернуть все.Проблема в том, что если div уже развернут, когда пользователь щелкает «развернуть все», расширенный div будет свернут, а остальные div расширятся (и наоборот).Как я могу развернуть все div, которые еще не раскрыты, и свернуть все div, которые еще не свернуты.

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

Answer 1

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

Вы можете проверить, имеет ли ваш элемент expand_all расширенный класс или нет, и переместить все ваши элементы вверх или вниз в зависимости от этого.

Answer 2

попробуйте ограничить ваш селектор только скрытыми значениями:

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

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

Answer 3

Более эффективный и эффективный способ сделать это будет следующим:

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

Этот подход учитывает следующие моменты:

• Храните складные панели в переменной panels, чтобы мы не нужно искать их каждый раз при нажатии на заголовок.
• При щелчке по заголовку, если его панель уже открыта, нам ничего не нужно делать.
• При сбросе панелей при каждом нажатии мы закрываем только открытые и игнорируем остальные.

JSFiddle

Answer 4

.slideDown () и .slideUp () должны делать.