Question

我有一个项目列表，可以单独展开/折叠，也可以使用全部展开/全部折叠按钮全部展开。所有项目都开始折叠，但如果您手动展开项目以便展开每个项目，则“全部展开”按钮应更改为“全部折叠”。同样，如果您折叠所有项目，则应将其更改为“全部展开”。

因此，每次单击某一行时，都应检查所有项目是否已折叠/展开，如果是，请更新“展开/折叠全部”按钮。

我的问题是，我不确定如何迭代点击上的所有项目以查看它们是否已折叠并正确更新。

这是一个JSFiddle：JSFiddle

这是我目前的代码：

    var expand = true;

jQuery.noConflict();
jQuery(function() {
    jQuery('[id^=parentrow]')
    .attr("title", "Click to expand/collapse")
    .click(function() {
        jQuery(this).siblings('#childrow-' + this.id).toggle();
        jQuery(this).toggleClass("expanded collapsed");
        ExpandCollapseCheck();
    });

    jQuery('[id^=parentrow]').each(function() {
        jQuery(this).siblings('#childrow-' + this.id).hide();

        if (jQuery(this).siblings('#childrow-' + this.id).length == 0)
            jQuery(this).find('.expand-collapse-control').text('\u00A0');
    });

    jQuery('#childrow-' + this.id).hide("slide", { direction: "up" }, 1000).children('td');


});

function CollapseItems() {
    jQuery('[id^=parentrow]').each(function() {
        jQuery(this).siblings('#childrow-' + this.id).hide();

        if (!jQuery(this).hasClass('expanded collapsed'))
            jQuery(this).addClass("expanded collapsed");
    });
}

function ExpandItems() {
    jQuery('[id^=parentrow]').each(function() {
        jQuery(this).siblings('#childrow-' + this.id).show();

        if (jQuery(this).hasClass('expanded collapsed'))
            jQuery(this).removeClass("expanded collapsed");

    });
}

function ExpandCollapseChildren() {

    if (!expand) {
        CollapseItems();
        jQuery('.expander').html('Expand All');
    }
    else {
        ExpandItems();
        jQuery('.expander').html('Collapse All');
    }

    expand = !expand;
    return false;
}

    function ExpandCollapseCheck() {
    if ((jQuery('[id^=parentrow]').hasClass('expanded collapsed')) && (expand)) {
        jQuery('.expander').html('Expand All');
        CollapseItems();
        expand = !expand;
    }
    else if ((!jQuery('[id^=parentrow]').hasClass('expanded collapsed')) && (!expand)) {
        jQuery('.expander').html('Collapse All');
        ExpandItems();
        expand = !expand;
    }
}

Answer 1

不要费心去迭代，只需使用选择器来计算所有元素的数量＆amp;他们的班级：

var $all = jQuery('selector to return all lines');
if($all.length == $all.filter('.collapsed').length)
  //all the rows are collapsed
if($all.end().length == $all.filter('.expanded').length)
  //all the rows are expanded

Answer 2

我在您的代码中看到的一些事情。

您似乎可能有多个具有相同ID的孩子，例如#childrow-parent0。这不是合法的HTML，可能会导致JavaScript出现问题。改为使用类。
操作ID以查找子项比使用内置jQuery选择器查找子项更困难。我意识到在这种情况下，他们是兄弟姐妹，而不是真正的孩子，但你仍然可以使用.nextUntil(".parent")来找到父母的所有“孩子”。
使用点击处理程序进行展开/折叠，而不是重复代码。如果您有一个点击处理程序，您可以在父级上调用.click()，它将像您点击它一样切换。
如果您的一半元素已折叠，是否需要“全部展开”或“全部折叠”？你可能想要两个。

考虑到所有这些，我用更少的线条编写了代码。为了回答您的具体问题，我只是将'.parent.expanded'元素的数量与'.parent'元素的数量进行比较，以查看它们是否全部展开。（我改为使用单个.parent类。）

Demo

您问题的相关代码：

$('#expand_all').toggleClass("disabled", $('.parent.expanded').length == $('.parent').length);
$('#collapse_all').toggleClass("disabled", $('.parent.collapsed').length == $('.parent').length);

这使用toggleClass()，第二个参数返回true / false，具体取决于折叠/展开父项的数量。 toggleClass使用此方法来确定是否已应用disabled类。

使用jQuery的可折叠列表 - 如何更新展开/折叠所有按钮

2 个答案: