如何用Bootstrap Accordion和ASP.NET MVC实现表格行互斥展开折叠？

我明白你想要的是同一时间仅一行展开的手风琴式折叠效果——点击新行时自动收起之前展开的行。咱们来调整你的代码，轻松实现这个需求：

核心思路 #

Bootstrap的折叠组件支持通过data-parent（Bootstrap 5为data-bs-parent）属性关联一组折叠面板，实现互斥展开的效果。我们只需要给所有折叠面板指定同一个父容器，就能让它们自动“互斥”。

修改后的代码 #

如果你使用的是Bootstrap 3/4：

<div class="panel-body" id="tableAccordion">
  <table class="table">
    @foreach (var item in Model) {
      <tr>
        <td class="accordion-toggle" data-toggle="collapse" data-target="#AA_@(item.Id)">
          <button class="bb" type="button">
            @Html.Raw(item.H)
          </button>
        </td>
        <td>
          @Html.Raw(item.E)
        </td>
      </tr>
      <tr>
        <!-- 新增colspan="2"让展开内容横跨两列，优化布局 -->
        <td colspan="2" id="AA_@(item.Id)" class="accordion-body collapse" data-parent="#tableAccordion">
          <table>
            <tr>
              <td>@Html.Raw(item.D)</td>
              <td>@Html.Raw(item.B)</td>
            </tr>
          </table>
        </td>
      </tr>
    }
  </table>
</div>

如果你使用的是Bootstrap 5：

Bootstrap 5对数据属性做了前缀调整，需要把data-*改成data-bs-*：

<div class="panel-body" id="tableAccordion">
  <table class="table">
    @foreach (var item in Model) {
      <tr>
        <td class="accordion-toggle" data-bs-toggle="collapse" data-bs-target="#AA_@(item.Id)">
          <button class="bb" type="button">
            @Html.Raw(item.H)
          </button>
        </td>
        <td>
          @Html.Raw(item.E)
        </td>
      </tr>
      <tr>
        <td colspan="2" id="AA_@(item.Id)" class="accordion-body collapse" data-bs-parent="#tableAccordion">
          <table>
            <tr>
              <td>@Html.Raw(item.D)</td>
              <td>@Html.Raw(item.B)</td>
            </tr>
          </table>
        </td>
      </tr>
    }
  </table>
</div>

关键修改点说明 #

1. 添加父容器ID：给外层的.panel-body加上唯一ID tableAccordion，作为所有折叠面板的关联容器。
2. 关联折叠面板：给每个带有collapse类的折叠单元格添加data-parent="#tableAccordion"（Bootstrap5为data-bs-parent），告诉Bootstrap这些面板属于同一组，同一时间只能展开一个。
3. 优化布局：给折叠单元格设置colspan="2"，让展开的内容横跨原来的两列，避免布局错位。

这样修改后，点击任意一行的按钮时，之前展开的行会自动折叠，完美实现你想要的互斥展开效果~

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