在表格行上单击隐藏或显示其他表格行

Question

在这个html中

@for (int i = 0; i < Model.AllCommonMatches.Length; i++)
{
    <tr class="category">
        <td>@Model.AllCommonMatches[i].StartDateTime.ToString("dddd dd MMMM HH:mm")</td>          
        <td>@Model.AllCommonMatches[i].EndDateTime.ToString("dddd dd MMMM HH:mm")</td>
        <td>@Model.AllCommonMatches[i].AvailableAttendees.Count &nbsp; of &nbsp; @Model.TotalAttendees</td>
    </tr>
    <tr class="subcategory">
       @foreach (var person in Model.AllCommonMatches[i].AvailableAttendees)
       {
           <td>@person.Email &nbsp; &nbsp; @person.FirstName &nbsp;&nbsp;@person.LastName</td>
       }
    </tr>                     
}

是否可以使用类别单击显示/隐藏tr与子类别？ 我对前端部分知之甚少。

Answer 1

您可以使用.toggle() jQuery方法：

$( document ).ready(function() {
    $('.category').on('click', function(){
        $(this).next('.subcategory').toggle(); // or .slideToggle() or whatever
    });
}); 

Answer 2

我为你设置了一个小小的JSFiddle：http://jsfiddle.net/veritas87/QSw3w/

$(document).ready(function() { 
    $('tr.category').on('click', function() { 
       $(this).next('.subcategory').fadeToggle(); 
    });
});

在JSFiddle中，您可以找到CSS和HTML。