如何使用 Javascript 隐藏和显示 GridView 行 onclick 标题元素？

Question

我有一个 GridView，其结构如下：

• 组头

  • 部门标题

    • （某人实体）
    • （某人实体）
    • （某人实体）

  • 部门标题

    • （某人实体）
    • （某人实体）
    • （某人实体）

• 组头

  • 部门标题

    • （某人实体）
    • （某人实体）
    • （某人实体）

  • 部门标题

    • （某人实体）
    • （某人实体）
    • （某人实体）

虽然我有 Javascript 可以切换按预期工作的部门标题和子元素，但切换在组标题级别不起作用，因为可以切换一个部门标题的子元素，但不能切换另一个部门标题所以当在组标题级别激活切换时，它只会反转切换，这不是我想要的所以我尝试编写一些 Javascript，当单击组标题时，它只会隐藏所有并发行，而不管切换状态如何，直到下一个group-header 如果它们没有被隐藏，否则单击 group-header 将显示/展开隐藏的行，无论切换状态如何，直到下一个 group-header。

但是，我无法编写代码，以便在单击组标题时隐藏所有后续行，直到下一个组标题（如果它们没有隐藏），否则显示它们。目前我在if (el.style.display != 'none') 行遇到"JavaScript runtime error: Unable to get property 'display' of undefined or null reference"，这表明我没有正确操作对象，但由于我是Javascript 新手，我不确定要操作什么obj 或attr 以获得所需的效果。

Javascript：

<script type="text/javascript">
    $(function () {
        $('.group-header').click(function () {
            $(this).nextUntil('.group-header').each(function () {
                var el = this;
                if (el.style.display != 'none') {
                    el.style.display = 'none';
                }
                else {
                    el.style.display = '';
                }
            }())
        });
    });

    $(function () {
        $('.dept-header').click(function () {
            $(this).nextUntil('.dept-header, .group-header').toggle();
        });
    });
</script>

供参考我的 Razor 代码：

<table id="companyGrid" class="table table-bordered table-striped grid">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Designation)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Department)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Company)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Year)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Salary)
        </th>
    </tr>
    @foreach (var group in Model.GroupBy(x => x.Company))
    {
        <tr class="group-header">
            <td colspan="7">
                <span class="h2">@group.Key</span>
            </td>
        </tr>
        foreach (var dept in group.GroupBy(x => x.Department))
        {
            <tr class="dept-header">
                <td colspan="6">
                    <span class="h4">@dept.Key</span>
                </td>
            </tr>
            foreach (var item in dept)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Designation)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Department)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Company)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Year)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Salary)
                    </td>
                </tr>
            }
        }
        <tr class="group-footer">
            <td colspan="6" class="text-center">
                <span class="label label-info">Company: @group.Key</span>
                <span class="label label-success">Total Employee: @group.Count()</span>
                <span class="label label-primary">Avg Salary: @group.Average(x => x.Salary).ToString("C")</span>
            </td>
        </tr>
    }
</table> 

Answer 1

$(function () {
        $('.group-header').click(function () {
            $(this).children('.dept-header').each(function () {
               $(this).slideToggle();
            })
        });
    });


 $(function () {
        $('.group-header').click(function () {
            $(this).children('.dept-header').each(function () {
                var el = this;
                if (el.style.display != 'none') {
                    el.style.display = 'none';
                }
                else {
                    el.style.display = '';
                }
            })
        });
    });
**UPDATE :** 
 $(function () {
    $('.group-header').click(function () {
        $(this).nextUntil('.group-header').each(function () {
            var el = this;
            if (el.style.display != 'none') {
                el.style.display = 'none';
            }
            else {
                el.style.display = '';
            }
        })
    });
});

编辑

$(function () {
                      $('.group-header').click(function () {
                          var parentgrpHeader = $(this);

                          $(this).nextUntil('.group-header').each(function () {
                             !parentgrpHeader.hasClass("toggle") ?  $(this).hide() : $(this).show();
                          });

                          parentgrpHeader.toggleClass('toggle');
                      });


                       $('.dept-header').click(function () {
                          $(this).toggleClass('collapsed').nextUntil('.dept-header, .group-header').toggle();
                      });


              });