在MVC表格中实现Bootstrap手风琴效果的问题排查

我一眼就看出问题所在啦——你所有的折叠面板都用了同一个ID 12345-cores，而且每行的data-target也都指向这个ID。HTML里ID是全局唯一的，浏览器只会匹配到第一个拥有该ID的元素，所以不管你点哪一行，都会展开第一行对应的内容。

要解决这个问题，核心就是给每一行的折叠面板生成唯一的ID，让点击事件能精准对应到当前行的内容。下面是两种可行的修改方案：

方案1：利用Item的唯一属性（推荐） #

如果你的Model里每个item都有唯一标识（比如Id字段），直接用它来生成ID最稳妥：

<div class="panel-body">
    <table class="table">
        @foreach (var item in Model)
        {
            <!-- 生成唯一的目标ID，前缀避免纯数字开头的HTML规范问题 -->
            var targetId = $"cores-{item.Id}";
            <tr class="accordion-toggle" data-toggle="collapse" data-target="#@targetId">
                <td align="left">@Html.Raw(item.H)</td>
                <td align="right">@Html.Raw(item.E)</td>
            </tr>
            <tr>
                <!-- 折叠面板的ID和上方的data-target完全对应 -->
                <td class="accordion-body collapse" id="@targetId">
                    <table>
                        <tbody>
                            <tr>
                                <td>@Html.Raw(item.D)</td>
                                <td></td>
                                <td>@Html.Raw(item.B)</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        }
    </table>
</div>

方案2：利用循环索引 #

如果Model里没有现成的唯一属性，也可以用循环的索引值来生成唯一ID：

<div class="panel-body">
    <table class="table">
        @for (int i = 0; i < Model.Count; i++)
        {
            var item = Model[i];
            var targetId = $"cores-{i}";
            <tr class="accordion-toggle" data-toggle="collapse" data-target="#@targetId">
                <td align="left">@Html.Raw(item.H)</td>
                <td align="right">@Html.Raw(item.E)</td>
            </tr>
            <tr>
                <td class="accordion-body collapse" id="@targetId">
                    <table>
                        <tbody>
                            <tr>
                                <td>@Html.Raw(item.D)</td>
                                <td></td>
                                <td>@Html.Raw(item.B)</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        }
    </table>
</div>

额外注意点 #

• 给ID加cores-前缀是为了避免HTML规范中“ID不能以数字开头”的问题，避免在某些浏览器里出现兼容性问题；
• 确保data-target的值是#加上对应的ID，两者必须完全匹配才能触发正确的折叠效果。

内容的提问来源于stack exchange，提问作者User9895