javascript - 使用 jquery 显示表中的相邻行

Question

我正在使用 mvc5 和 razor，并且我将所需的所有数据绑定(bind)到 View 。

View.cs

<table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.TestTermin)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Location)
            </th>
            <th>
                #Users applied
            </th>
        </tr>

        @foreach (var test in Model)
        {
            <tr class="text-left">
                <td>
                    @Html.DisplayFor(modelItem => test.TestTermin)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => test.Location)
                </td>
                <td>
                    @test.Users.Count
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = test.ID }) |
                    @Html.ActionLink("Details", "Details", new { id = test.ID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = test.ID })
                </td>
            </tr>
            foreach (var user in test.Users)
            {
                <tr class="hideMe" style="display:none">
                    <td>@user.FirstName</td>
                    <td>@user.LastName</td>
                    <td>@user.Email</td>
                </tr>
            }
        }

</table>

这会产生如下所示的 html:

<tr class="text-left">
<tr class="hideMe">
<tr class="hideMe">
<tr class="text-left">
<tr class="hideMe">
<tr class="text-left">

有没有一种方法，使用 jQuery 或 mvc5/razor 套件中的其他东西，可以实现以下目标:

单击一行，显示相邻的隐藏行，然后单击将它们再次隐藏起来？我不想显示表中的所有隐藏行，只想显示属于单击的 tr 的行。

我尝试过以下方法:

<script type="text/javascript">
    $('tr').click(function () {
        var $this = $(this);
        $('tr').toggle('slow');

    });
</script>

但这只是显示了隐藏的所有内容，并隐藏了所有可见的内容，这不是我所追求的功能。

Answer 1

代码中的问题 $('tr').toggle('slow'); 是选择器 $('tr') 选择所有 tr's 并切换所有 tr's 的显示。您需要做的只是选择当前点击的 tr 的下几个 tr 并切换其显示。您可以使用Jquery .nextUntill() 功能。

<强> Working Fiddle

$('tr.text-left').click(function () {   
    $(this).nextUntil("tr.text-left").toggle('slow');
});