为什么在单击 table header 到 expand/collapse 时它会为我所有的 table 执行此操作，而不仅仅是单击的那个？

Question

我正在 ASP.Net 核心 MVC 项目的视图中创建从 Json 生成的 table。单击 header 时，我正在使用 bootstrap 到 expand/collapse table，但是当我这样做时 expands/collapses 我所有的 table不仅仅是我点击的那个。我该如何解决这个问题，只显示 table 中我点击 header 的数据？

   @foreach (var item in Model)
    {
        @foreach (var i in item.Request.Path.Matchers)
        {
            @if (i.Pattern.Contains("/api.datastore") == false)
            {
                    <table class="table">
                        <thead class="thead-dark">
                            <tr data-toggle="collapse" data-target="#accordion" class="clickable">
                                <th class="center">Id: @item.Guid</th>
                            </tr>
                        </thead>
                        <tbody id="accordion" class="collapse">
 
                                <tr>
                                    <td><span class="label">URL: </span>@i.Pattern</td>
                                </tr>
                                <tr>
                                    <td><span class="label">Body: </span>@item.Response.Body</td>
                                </tr>
 
                        </tbody>
                    </table>

            }
        }

Answer 1

关键在于 data-target="#accordion" 和 id="accordion"。可以在“accordion”之后的data-target 和id 的值中添加@item 中的一些文本来识别关系。

Answer 2

data-target和id都是一样的(accordion),需要区分如下:

@{ 
    var j = 0;   //add this...
}
@foreach (var item in Model)
{
    @foreach (var i in item.Request.Path.Matchers)
    {
        @if (i.Pattern.Contains("/api.datastore") == false)
        {
            <table class="table">
                <thead class="thead-dark">

                                                       //change here...
                    <tr data-toggle="collapse" data-target="#accordion_@j" class="clickable">
                        <th class="center">Id: @item.Guid</th>
                    </tr>
                </thead>

                           //change here...
                <tbody id="accordion_@j" class="collapse">
                    <tr>
                        <td><span class="label">URL: </span>@i.Pattern</td>
                    </tr>
                    <tr>
                        <td><span class="label">Body: </span>@item.Response.Body</td>
                    </tr>

                </tbody>
            </table>

             j++;   //add this .....

        }
    }
}

为什么在单击 table header 到 expand/collapse 时它会为我所有的 table 执行此操作，而不仅仅是单击的那个？

Why when clicking a table header to expand/collapse it is doing it for all my tables not just the one clicked?

asp.net-mvc

html-table

twitter-bootstrap

asp.net-core