如何用Bootstrap5实现单面板展开的侧边导航嵌套手风琴

问题根源在于折叠面板的id重复，或者data-bs-target/data-bs-parent属性配置错误，导致Bootstrap无法区分不同的折叠面板，触发时会同时展开所有匹配元素。以下是具体解决步骤：

1. 确保每个折叠面板的id唯一 #

每个手风琴面板必须有独一无二的id，不能重复使用同一标识。比如模板可能复用了通用id，要改成带业务标识的唯一id：

错误示例（重复id）：

<!-- 第一个菜单 -->
<button class="btn" data-bs-toggle="collapse" data-bs-target="#collapseMenu">用户管理</button>
<div class="collapse" id="collapseMenu">...</div>

<!-- 第二个菜单 -->
<button class="btn" data-bs-toggle="collapse" data-bs-target="#collapseMenu">内容管理</button>
<div class="collapse" id="collapseMenu">...</div>

正确示例（唯一id）：

<!-- 第一个菜单 -->
<button class="btn" data-bs-toggle="collapse" data-bs-target="#collapseUsers">用户管理</button>
<div class="collapse" id="collapseUsers">...</div>

<!-- 第二个菜单 -->
<button class="btn" data-bs-toggle="collapse" data-bs-target="#collapsePosts">内容管理</button>
<div class="collapse" id="collapsePosts">...</div>

2. 配置data-bs-parent实现单面板展开 #

给整个侧边导航手风琴组设置父容器id，每个触发按钮的data-bs-parent指向该容器，确保点击时仅展开当前面板，自动关闭同组其他面板：

<!-- 侧边导航父容器 -->
<div class="sidebar" id="sidebarAccordion">
  <!-- 一级菜单1 -->
  <div class="nav-item">
    <button class="nav-link" data-bs-toggle="collapse" data-bs-target="#collapseUsers" data-bs-parent="#sidebarAccordion">
      用户管理
    </button>
    <div class="collapse" id="collapseUsers">
      <div class="nav flex-column ms-3">
        <a class="nav-link" href="#">用户列表</a>
        <a class="nav-link" href="#">添加用户</a>
      </div>
    </div>
  </div>

  <!-- 一级菜单2 -->
  <div class="nav-item">
    <button class="nav-link" data-bs-toggle="collapse" data-bs-target="#collapsePosts" data-bs-parent="#sidebarAccordion">
      内容管理
    </button>
    <div class="collapse" id="collapsePosts">
      <div class="nav flex-column ms-3">
        <a class="nav-link" href="#">文章列表</a>
        <a class="nav-link" href="#">分类管理</a>
      </div>
    </div>
  </div>
</div>

3. PHP动态生成菜单的注意事项 #

如果侧边导航是通过PHP循环MySQL数据生成的，要确保循环时生成唯一id，比如用数据主键或循环索引拼接：

<?php
// 假设从数据库获取的菜单数组
$menuItems = [
  ['id' => 1, 'name' => '用户管理', 'children' => ['用户列表', '添加用户']],
  ['id' => 2, 'name' => '内容管理', 'children' => ['文章列表', '分类管理']]
];
?>

<div class="sidebar" id="sidebarAccordion">
  <?php foreach ($menuItems as $item): ?>
    <div class="nav-item">
      <button class="nav-link" data-bs-toggle="collapse" data-bs-target="#collapse<?= $item['id'] ?>" data-bs-parent="#sidebarAccordion">
        <?= $item['name'] ?>
      </button>
      <div class="collapse" id="collapse<?= $item['id'] ?>">
        <div class="nav flex-column ms-3">
          <?php foreach ($item['children'] as $child): ?>
            <a class="nav-link" href="#"><?= $child ?></a>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
  <?php endforeach; ?>
</div>

关键注意点 #

• Bootstrap5必须使用带bs前缀的属性：data-bs-toggle、data-bs-target、data-bs-parent，不要混用Bootstrap4的无前缀属性
• 确保data-bs-target的值和面板id完全匹配（包含#前缀）
• 若不需要自动关闭其他面板可移除data-bs-parent，但单面板展开需求必须保留该属性

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