2

[すべて展開]/[すべて折りたたむ] ボタンを使用して、個別に、または一度にすべて展開/折りたたむことができるアイテムのリストがあります。すべてのアイテムが折りたたまれて開始されますが、すべてのアイテムが展開されるようにアイテムを手動で展開すると、[すべて展開] ボタンが [すべて折りたたむ] に変わります。同様に、すべての項目を折りたたむと、[すべて展開] に変更されます。

したがって、個々の行をクリックするたびに、すべてのアイテムが折りたたまれているか展開されているかどうかを確認し、そうであれば、[すべて展開/すべて折りたたむ] ボタンを更新する必要があります。

私の問題は、クリックですべてのアイテムを反復処理して、それらが折りたたまれているかどうかを確認し、適切に更新する方法がわからないことです。

このための 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()し、2 番目の引数は折りたたまれた/展開された親の数に応じて true/false を返します。これは、クラスが適用されtoggleClassているかどうかを判断するために使用されます。disabled

于 2012-05-10T20:29:28.097 に答える