如何在Bootstrap v4.1中实现多级下拉菜单？

嘿，我来帮你把现有的下拉按钮扩展成支持多级子菜单的版本！基于你提供的Bootstrap dropdown基础结构，只需要嵌套额外的dropdown组件就能轻松实现，下面是完整的可运行代码，我还加了注释帮你理清结构：

<div class="dropdown">
  <!-- 主下拉按钮 -->
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <!-- 一级菜单 -->
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <!-- 带二级子菜单的菜单项 -->
    <div class="dropdown dropright">
      <a class="dropdown-item dropdown-toggle" href="#" id="subDropdownMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        More options
      </a>
      <!-- 二级子菜单 -->
      <div class="dropdown-menu" aria-labelledby="subDropdownMenu">
        <a class="dropdown-item" href="#">Sub action 1</a>
        <a class="dropdown-item" href="#">Sub action 2</a>
        <!-- 带三级子菜单的菜单项 -->
        <div class="dropdown dropright">
          <a class="dropdown-item dropdown-toggle" href="#" id="thirdDropdownMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Even more
          </a>
          <!-- 三级子菜单 -->
          <div class="dropdown-menu" aria-labelledby="thirdDropdownMenu">
            <a class="dropdown-item" href="#">Third level 1</a>
            <a class="dropdown-item" href="#">Third level 2</a>
          </div>
        </div>
      </div>
    </div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

关键要点说明： #

• 要创建子菜单，只需要在父级dropdown-item的位置嵌套一个新的dropdown容器（可以搭配dropright或dropleft类控制子菜单弹出方向）
• 子菜单的触发元素需要同时添加dropdown-item和dropdown-toggle类，并且设置data-toggle="dropdown"属性
• 别忘了给每个下拉组件设置唯一的id和对应的aria-labelledby属性，保证无障碍访问的兼容性

注意事项： #

• 确保你已经正确引入了Bootstrap的CSS文件，以及依赖的JavaScript文件（Bootstrap 4需要引入jQuery和Popper.js；Bootstrap 5则只需要Popper.js，无需jQuery）
• 如果子菜单弹出位置不合适，可以用dropdown-menu-right或dropdown-menu-left类调整位置，避免页面溢出

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