jquery - 简单 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 元素是否具有扩展类，并根据情况向上或向下滑动所有元素。