2

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

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

我的问题是我不确定如何通过单击遍历所有项目以查看它们是否折叠并正确更新。

这是一个 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;
    }
}
4

2 回答 2

0

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

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
于 2012-05-10T20:25:17.317 回答
0

我在您的代码中看到了几件事。

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

考虑到所有这些，我用更少的行编写了您的代码。为了回答您的具体问题，我只是将“.parent.expanded”元素的数量与“.parent”元素的数量进行了比较，看看它们是否都被扩展了。（我改为使用单个.parent课程。）

演示

您问题的相关代码：

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

这使用toggleClass()，第二个参数根据折叠/展开的父项的数量返回真/假。这用于toggleClass确定是否disabled应用了该类。

于 2012-05-10T20:29:28.097 回答