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

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

我在你的代码中看到了一些东西。

1. 您可能有多个具有相同ID的子项，例如#childrow-parent0。这不是合法的超文本标记语言，可能会导致JavaScript出现问题。使用classes instead.
2. Manipulating ID查找子类比使用内置的jQuery选择器查找子类要困难得多。我意识到在这种情况下，它们是兄弟姐妹，而不是真正的子代，但您仍然可以使用.nextUntil(".parent")来查找父代的所有“子代”。
3. 使用您的单击处理程序来进行展开/折叠，而不是重复代码。如果你有一个点击处理程序，你可以在父元素上调用.click()，它会像你点击它一样切换。
4. 如果你的元素有一半被折叠，你想要“全部展开”还是“全部折叠”？你可能两者都想要。

考虑到这些，我用更少的代码行编写了您的代码。为了回答你的具体问题，我只是比较了'.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类。

Answer 2

不要费心迭代，只需使用选择器来获取所有元素及其类的计数：

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