How to Hide && Show GridView rows onclick of header element with Javascript?

问题

I have a GridView that has a structure like this:

• group-header

  • dept-header

    • (some person entity)
    • (some person entity)
    • (some person entity)

  • dept-header

    • (some person entity)
    • (some person entity)
    • (some person entity)

• group-header

  • dept-header

    • (some person entity)
    • (some person entity)
    • (some person entity)

  • dept-header

    • (some person entity)
    • (some person entity)
    • (some person entity)

While I have Javascript that toggles the dept-header and sub-elements that works as intended, toggle does not work at group header level because the sub elements of one dept-header could be toggled, but not another dept-header so when toggle is activated at the group-header level it just inverts the toggling which is not what I want so I tried to write some Javascript that when group-header is clicked it would just hide all the concurrent rows regardless of toggle state until the next group-header if they weren't hidden, else clicking the group-header would show/expand the hidden rows regardless of toggle state until the next group-header.

However, I have not been able to work out the code so that when group-header is clicked it hides all the following rows until the next group-header if they aren't hidden, else shows them. Currently I run into a "JavaScript runtime error: Unable to get property 'display' of undefined or null reference" at the if (el.style.display != 'none') line which suggests that I'm not properly manipulating objects, but I'm not sure what obj's or attr's to manipulate to get the desired effect due to my being new to Javascript.

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>

For reference my Razor code:

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

回答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 = '';
            }
        })
    });
});

EDIT

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


              });

来源：https://stackoverflow.com/questions/32619833/how-to-hide-show-gridview-rows-onclick-of-header-element-with-javascript