简单的 JQuery 展开全部折叠全部切换答案

【问题标题】：Simple JQuery Expand All Collapse All Toggle简单的 JQuery 展开全部折叠全部切换
【发布时间】：2011-10-20 18:09:42
【问题描述】：

我正在展开和折叠 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");
    });
});

【问题讨论】：

标签： jquery jquery-selectors

【解决方案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 元素是否具有扩展类，并根据具体情况向上或向下滑动所有元素。

【讨论】：

【解决方案2】：

尝试将选择器限制为隐藏值：

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

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

【讨论】：

【解决方案3】：

.slideDown() 和 .slideUp() 应该可以。

【讨论】：

【解决方案4】：

一种更有效和高效的方法如下：

$(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

【讨论】：