Question

我有一个项目类，继承是项目有章节，章节有组，组有任务。现在我在表格中显示所有这些内容。该表是使用此代码创建的。

<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>

我用来处理切换的脚本包含此代码

<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>

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

Answer 1

<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>

这可以做想做的事情

具有多个继承级别的表 - JQuery

1 个答案: