jQuery可折叠列表-如何更新“展开/折叠全部”按钮

Question

I've got a list of items which can be expanded/collapsed individually or all at once with an Expand All/Collapse All button. All the items start collapsed, but if you manually expand item so that every item is expanded, the 'Expand All' button should change to 'Collapse All'. Similarly if you collapse all the items it should change to 'Expand All'.

So every time you click on an individual line, it should check to see if ALL the items have now been collapsed/expanded, and if so, update the Expand/Collapse All button.

My problem is that I'm not sure how to iterate over all the items on a click to see if they are collapsed or not and properly update.

Here is a JSFiddle for this: JSFiddle

Here is my current code:

    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

Don't bother iterating, just use a selector to get a count of all the elements & their classes:

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

A couple of things I see with your code.

1. It seems that you may have multiple children with the same ID, such as #childrow-parent0 . This is not legal HTML, and can lead to problems with JavaScript. Use classes instead.
2. Manipulating ID's to find children is more difficult than using built-in jQuery selectors to find children. I realize that in this case, they are siblings rather than true children, but you can still use .nextUntil(".parent") to find all of the "children" of a parent.
3. Use your click handlers to do the expanding/collapsing instead of repeating code. One you have a click handler, you can call .click() on a parent, and it will toggle as if you clicked it.
4. If half of your elements are collapsed, do you want "Expand All" or "Collapse All"? You might want both.

With all of that in mind, I wrote your code with a lot less lines. To answer your specific question, I just compared the number of '.parent.expanded' elements to the number of '.parent' elements to see if they were all expanded or not. (I changed to using a single .parent class.)

Demo

The relevant code to your question:

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

This uses toggleClass() , with the second argument returning true/false depending on the number of collapsed/expanded parents. This is used by toggleClass to determine whether the disabled class is applied.