如何基于Bootstrap手风琴组件在左侧导航菜单中创建子菜单项？

要实现带嵌套子菜单的垂直侧边栏导航，你可以直接基于Bootstrap 5的手风琴组件改造，核心是复用手风琴的折叠逻辑，同时调整样式适配侧边栏布局，具体步骤如下：

1. 基础结构搭建 #

先创建侧边栏容器，将Bootstrap手风琴的accordion类应用到侧边栏上，搭配网格系统固定侧边栏位置：

<div class="container-fluid">
  <div class="row">
    <!-- 垂直侧边栏 -->
    <div class="col-md-3 bg-light">
      <div class="accordion accordion-flush" id="sidebarAccordion">
        <!-- 普通主菜单项 -->
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              菜单项1
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#sidebarAccordion">
            <div class="accordion-body">
              <a href="#" class="d-block py-1 text-decoration-none">菜单项1链接</a>
            </div>
          </div>
        </div>

        <!-- 带子菜单的主菜单项3 -->
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              菜单项3
            </button>
          </h2>
          <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#sidebarAccordion">
            <div class="accordion-body">
              <!-- 子菜单列表 -->
              <ul class="list-unstyled ps-3">
                <li><a href="#" class="d-block py-1 text-decoration-none">Subitem 1</a></li>
                <li><a href="#" class="d-block py-1 text-decoration-none">Subitem 2</a></li>
                <li><a href="#" class="d-block py-1 text-decoration-none">Subitem 3</a></li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 带子菜单的主菜单项4 -->
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingFour">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
              菜单项4
            </button>
          </h2>
          <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#sidebarAccordion">
            <div class="accordion-body">
              <ul class="list-unstyled ps-3">
                <li><a href="#" class="d-block py-1 text-decoration-none">Subitem 1</a></li>
                <li><a href="#" class="d-block py-1 text-decoration-none">Subitem 2</a></li>
                <li><a href="#" class="d-block py-1 text-decoration-none">Subitem 3</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="col-md-9">
      <!-- 你的页面内容 -->
    </div>
  </div>
</div>

2. 样式优化适配侧边栏 #

Bootstrap默认手风琴样式是为水平内容设计的，添加自定义CSS调整视觉效果：

/* 调整侧边栏按钮样式，贴合导航形态 */
.accordion-button {
  text-align: left;
  border-radius: 0 !important;
  padding: 0.75rem 1rem;
}

.accordion-button:not(.collapsed) {
  background-color: #e9ecef;
}

/* 子菜单缩进与交互样式 */
.accordion-body ul {
  margin: 0;
}

.accordion-body a:hover {
  color: #0d6efd;
  background-color: #f8f9fa;
}

/* 固定侧边栏高度（可选） */
.col-md-3.bg-light {
  min-height: 100vh;
}

3. 核心逻辑说明 #

• 借助Bootstrap手风琴的data-bs-toggle="collapse"和data-bs-target属性，实现主菜单点击展开/折叠子菜单的交互。
• data-bs-parent="#sidebarAccordion"属性确保同一时间仅一个子菜单展开（如需允许多个展开，移除该属性即可）。
• 子菜单用list-unstyled清除默认列表样式，ps-3实现缩进，区分层级。

4. 扩展优化（可选） #

• 给当前选中的菜单项添加active类，通过CSS高亮显示。
• 如需多级嵌套子菜单，只需在子菜单中再次嵌套手风琴结构，重复上述逻辑即可。

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