Javascript 在可折叠div中显示详细信息

我有一个目标：

public class Person {
   public string FirstName {get; set;}
   public string LastName{get; set;}
   public int Age {get; set;}
   public List<Car> Cars {get; set;}
}
public class Car{
   public string Name {get; set;}
   public DateTime Manufactured {get; set;}
}

公共类人物{
公共字符串名{get；set；}
公共字符串LastName{get；set；}
公共整数{get；set；}
公共列表车辆{get；set；}
}
公车{
公共字符串名称{get；set；}
公共日期时间{get；set；}
}

在razor视图中，我正在遍历person对象列表并显示其属性

@foreach (var item in Model){
   <tr id="@item.Id">
       <td>@item.FirstName </td>
       <td>@item.LastName</td>
       <td>@item.Age </td>
    </tr>
}

@foreach（模型中的变量项）{
@item.FirstName
@item.LastName
@项目.年龄
}

---

当用户单击一个

tr

时，如何在可折叠的

div

中显示汽车列表？

我刚刚在记事本中做了这个。也许你可以以此作为灵感：

@foreach (var item in Model){
    <tr id="person-@item.Id" class="person">
       <td>@item.FirstName </td>
       <td>@item.LastName</td>
       <td>@item.Age </td>
    </tr>
    @if (item.Cars != null && item.Cars.Count > 0) {
    <tr class="cars" id="cars-for-person-@item.Id" style="display: none;">
        <td colspan="3">
        @foreach (var car in item.Cars){
            <div class="each-car">
                <span class="name">@car.Name</span>
                <span class="name">@car.Manufactured </span>
            </div>
        }
        </td>
    </tr>
    }
}

<script>
    $(function() {
        var table = $("table");
        table.on("click", "tr.person", function() {
            $(this).next("tr.cars").toggle();
        });
    });
</script>

@foreach（模型中的变量项）{
@item.FirstName
@item.LastName
@项目.年龄
@如果（item.Cars！=null&&item.Cars.Count>0）{
@foreach（项目车辆中的var车辆）{
@车，名字
@汽车，制造的
}
}
}
$（函数（）{
var表=$（“表”）；
表.关于（“单击”，“tr.person”，函数（））{
$（this.next（“tr.cars”）.toggle（）；
});
});

请注意，我将

tr

上的

id

属性更改为将

person-

作为前缀，因为将id单独作为整数是无效的HTML

---

这里有一个问题：

试着看看像JQueryUI这样的库，它有许多不同的控件，可以帮助您实现所需的功能。也许是手风琴什么的？你能改变HTML的结构吗？将表格用于可折叠内容并不理想。不能使用

@item.Cars.Name