Javascript 隐藏所有子表行

我正在与jQuery一起尝试切换父tr的子tr。
这是一次工作一个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>

一级
一级
二级
三级
一级
一级
二级

---

谢谢您的帮助。

这应该可以完成以下工作：

$(".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();
});

---

此处演示：

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

函数getLevel（el）{//从类名中将级别提取为整数
var level=/level（\d+）/.exec（el.className）
返回级别！=null？parseInt（级别[1]，10）：NaN；
}
$（'.mainTable'）。在（'click'，'td'，function（）{//上使用事件委派
var level=getLevel（this），//获取当前级别
父母、国家；
如果（level==level）{//检查NaN
parent=$（this.parent（'tr'）；//获取parent
state=！！parent.data（'state'）；//获取当前状态
parent.nextUntil（函数（u，项）{//筛选较低级别
return getLevel（item.cells[0]）您可以修改HTML还是必须保持这样？表行没有子行或父行，行之间都是兄弟行。行的父行是表。请使用.prev（）或.next而不是.parent（）谢谢-唯一的问题是，当我单击level 2时，它下面的level 3类在单击下一个向上的level 1类时不会保持折叠状态。谢谢。这肯定会实现。现在唯一的问题是，当我单击level 3上面的level 2隐藏level 3，然后单击level 1时，level 3会在第一个clic上重新出现级别1的k。当我再次单击级别1时，级别2和级别3都会消失（这是我在本教程中所希望的行为）。
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.
    }
});

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