Javascript 具有多级继承的表-JQuery

我有一个项目类，继承就这样结束了 项目有节，节有组，组有任务。现在我在一个表中显示所有这些。该表是使用此代码创建的

<table class="table table-condensed table-hover" border="1">
    <tr style="background-color: black; color: white">
        <th></th>
        <th>Manual/Group/Section</th>
        <th>Task</th>
        <th>Delete</th>
    </tr>
    @foreach (Manual manual in ViewBag.mlist)
    {
        <tr class="manualHeader no-hover jd-green">
            <th style="text-align:center"><input type="checkbox" /></th>
            <th>Manual Name @manual.name</th>
            <th></th>
            <th style="text-align:center"><button>Add Section</button></th>
        </tr>
        foreach (Section sections in @manual.sections)
        {
            <tr class="sectionHeader no-hover jd-yellow">
                <th style="text-align:center"><input type="checkbox" /></th>
                <th>Section Name : @sections.name</th>
                <th></th>
                <th style="text-align:center"><button>Add Group</button></th>
            </tr>
            foreach (Group group in @sections.groups)
            {
                <tr class="groupHeader no-hover jd-gray">
                    <th style="text-align:center"><input type="checkbox" /></th>
                    <th>Group Name : @group.name</th>
                    <th></th>
                    <th style="text-align:center"><button>Add Task</button></th>
                </tr>
                foreach (Task task in @group.tasks)
                {
                    <tr>
                        <th style="text-align:center"><input type="checkbox" /></th>
                        <th></th>
                        <th>Task Name:<input type="text" style="width:100%" value="@task.name" name="@task.name" /></th>
                        <th></th>
                    </tr>
                }
            }
        }
    }
</table>

手册/小组/章节
任务
删除
@foreach（ViewBag.mlist中的手动）
{
手动名称@Manual.Name
添加节
foreach（在@manual.sections中的章节）
{
节名：@sections.Name
添加组
foreach（在@sections.groups中分组）
{
组名：@Group.Name
添加任务
foreach（@group.tasks中的任务）
{
任务名称：
}
}
}
}

我用来处理切换的脚本由以下代码组成

<script>
    $(document).ready(function () {
        $(".manualHeader").click(function () {
            $(this).nextUntil(".manualHeader").toggle();
        });
        $(".sectionHeader").click(function () { $(this).nextUntil(".manualHeader, .sectionHeader").toggle(); });
        $(".groupHeader").click(function () { $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").toggle(); });
    });
</script>

$（文档）.ready（函数（）{
$（“.manualHeader”）。单击（函数（）{
$（this）.nextUntil（“.manualHeader”）.toggle（）；
});
$（“.sectionHeader”）。单击（函数（）{$（this.nextUntil（“.manualHeader.sectionHeader”）.toggle（）；}）；
$（“.groupHeader”）。单击（函数（）{$（this.nextUntil（“.manualHeader.sectionHeader.groupHeader”）。切换（）；}）；
});

现在我明白了为什么它不能正常工作了，当你切换一个组，使其下的所有任务都被隐藏，然后你切换该组所在的手册，以及通过单击该组之前隐藏的任务以外的所有内容。我理解为什么会发生这种情况，因为在我的脚本中使用了toggle（）和untinext（）。我的问题是如何使用某种条件来检查可见性或其他东西来修复它。

<script>
    $(document).ready(function () {
        $(".manualHeader").click(function () {
            var anyHidden = false;
            var allHidden = true;
            $(this).nextUntil(".manualHeader").each(function () {
                if ($(this).is(":visible"))
                    allHidden = false;
            });
            if (allHidden)
                $(this).nextUntil(".manualHeader").each(function () {
                    if ($(this).is(".sectionHeader"))
                        $(this).show();
                });
            else
                $(this).nextUntil(".manualHeader").hide();
        });
        $(".sectionHeader").click(function () {
            var anyHidden = false;
            var allHidden = true;
            $(this).nextUntil(".manualHeader, .sectionHeader").each(function () {
                if ($(this).is(":visible"))
                    allHidden = false;
            });
            if (allHidden)
                $(this).nextUntil(".manualHeader, .sectionHeader").each(function () {
                    if ($(this).is(".groupHeader"))
                        $(this).show();
                });
            else
                $(this).nextUntil(".manualHeader, .sectionHeader").hide();
        });
        $(".groupHeader").click(function () {
            var anyHidden = false;
            var allHidden = true;
            $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").each(function () {
                if ($(this).is(":visible"))
                    allHidden = false;
            });
            if (allHidden)
                $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").show();
            else
                $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").hide();
        });
    });
</script>

$（文档）.ready（函数（）{
$（“.manualHeader”）。单击（函数（）{
var anyHidden=false；
var-allHidden=true；
$（this）.nextUntil（“.manualHeader”）。每个（函数（）{
如果（$（this）.is（“：可见”））
所有隐藏=错误；
});
如果（全部隐藏）
$（this）.nextUntil（“.manualHeader”）。每个（函数（）{
if（$（this）.is（“.sectionHeader”））
$（this.show（）；
});
其他的
$（this）.nextUntil（“.manualHeader”）.hide（）；
});
$（“.sectionHeader”）。单击（函数（）{
var anyHidden=false；
var-allHidden=true；
$（this）.nextUntil（“.manualHeader，.sectionHeader”）。每个（函数（）{
如果（$（this）.is（“：可见”））
所有隐藏=错误；
});
如果（全部隐藏）
$（this）.nextUntil（“.manualHeader，.sectionHeader”）。每个（函数（）{
if（$（this）.is（“.groupHeader”））
$（this.show（）；
});
其他的
$（this）.nextUntil（“.manualHeader.sectionHeader”）.hide（）；
});
$（“.groupHeader”）。单击（函数（）{
var anyHidden=false；
var-allHidden=true；
$（this）.nextUntil（“.manualHeader、.sectionHeader、.groupHeader”）。每个（函数（）{
如果（$（this）.is（“：可见”））
所有隐藏=错误；
});
如果（全部隐藏）
$（this）.nextUntil（“.manualHeader.sectionHeader.groupHeader”）.show（）；
其他的
$（this）.nextUntil（“.manualHeader.sectionHeader.groupHeader”）.hide（）；
});
});

这是为了做我们想做的事情