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

.slideDown()和.slideUp()应该这样做。

Answer 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

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

4 个答案: