Question

我正在使用jQuery试图切换父母tr的孩子们这一次适用于一个tr级别;然而，当一个内部的tr折叠它的孩子然后外部的孩子做同样的事情时，内部tr的孩子仍然可见。
我希望在单击Level 1类时隐藏所有后代（Level 2和Level 3类），并且我希望在单击Level 2类时隐藏Level 3类。

这是我一直在使用的代码。

$(".mainTable td[class^='Level1']").each(function() {
    //copy td class to tr
    $(this).parent().addClass($(this).attr('class'));
    //add function to tr
    $(this).parent().click(function() {
        //toggle all elements to next Level1 class
        $(this).nextUntil("[class^='Level1']").toggle();
    });
});


$(".mainTable td[class^='Level2']").each(function() {
    //copy td class to tr
    $(this).parent().addClass($(this).attr('class'));
    //add function to tr
    $(this).parent().click(function() {
        //toggle all elements to next Level1 class
        $(this).nextUntil("[class^='Level1']").toggle();
    });
});

这是HTML：

<table class="mainTable">
    <tbody>
        <tr><td class="Level1">Level 1</td></tr>
        <tr><td class="Level1">Level 1</td></tr>
        <tr><td class="Level2">Level 2</td></tr>
        <tr><td class="Level3">Level 3</td></tr>
        <tr><td class="Level1">Level 1</td></tr>
        <tr><td class="Level1">Level 1</td></tr>
        <tr><td class="Level2">Level 2</td></tr>
    </tbody>
</table>

感谢您的帮助。

Answer 1

您可以使此代码更干净。这适用于任何级别的深度。 Demo

function getLevel(el) { //extract level as integer from classname
    var level = /Level(\d+)/.exec(el.className)
    return level != null ? parseInt(level[1], 10) : NaN;    
}

$('.mainTable').on('click', 'td', function() { //use event delegation
    var level = getLevel(this), //get current level
        parent, state;
    if(level == level) { //checking for NaN              
        parent = $(this).parent('tr'); //get parent
        state = !!parent.data('state'); //get current state

        parent.nextUntil(function(_, item) { //filter lower levels
                    return getLevel(item.cells[0]) <= level;
               })
              .each(function(_, item) {
                    $(item).data('state', !state)
                           .toggle(state);
               }); //show|hide

        parent.data('state', !state); //save current state.
    }
});

如果您可以修改html，则可以使用数据属性大大降低代码复杂性。

<tr data-level="1">...</tr>
<tr data-level="3">...</tr>

指定这样的级别，你将消除以数字形式提取级别所需的所有字符串操作。

Answer 2

这应该做的工作：

$(".mainTable td[class^=Level]").each(function() {
    $(this).parent().addClass($(this).attr('class'));
});

$(".mainTable tr[class^=Level1]").click(function() {
    var items = $(this).nextUntil("[class^=Level1]");

    if (items.filter(':hidden').length > 0) {
        items.show();
    }
    else {
        items.hide();
    }
});

$(".mainTable tr[class^=Level2]").click(function() {
    $(this).nextUntil("[class^=Level1], [class^=Level2]").toggle();
});

在这里演示：jsFiddle

隐藏所有后代表行

2 个答案: