Bootstrap 5导航栏是否支持嵌套下拉菜单？

Bootstrap 5 默认不支持嵌套下拉菜单，官方文档未提及该功能是因为框架原生没有提供这类组件的实现逻辑——这是出于简化导航结构、提升移动端用户体验的设计考量。

你当前的代码问题在于结构不符合Bootstrap的预期，而且原生的下拉组件JS不会处理嵌套层级的触发逻辑。要实现嵌套下拉，需要自定义样式和JS逻辑，以下是可行的调整方案：

修正后的基础结构 #

先调整HTML结构，把嵌套的下拉项放在合适的容器里，替换不合适的类：

<li class="nav-item dropdown">
  <a href="#" id="dropdownHelpMenuId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">
      Help
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownHelpMenuId">
      <!-- 嵌套下拉的容器，用dropdown包裹dropdown-item -->
      <div class="dropdown">
          <a href="#" id="dropdownBrowseMenuId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">
              Browse
          </a>
          <div class="dropdown-menu" aria-labelledby="dropdownBrowseMenuId">
              <a href="/albums.start?cid=0$albums&amp;title=Albums" class="dropdown-item">
                  Albums
              </a>
              <a href="/albumartists.start?cid=0$=Album_Artists&amp;title=Album Artists" class="dropdown-item">
                  Album Artists
              </a>
              <a href="/topcontainer.start?cid=0$=Overall_work&amp;title=Works" class="dropdown-item">
                  Works
              </a>
              <a href="/tracks.start?cid=0$items&amp;title=Tracks" class="dropdown-item">
                  Tracks
              </a>
              <a href="/folders.start?cid=0$folders&amp;title=Folders" class="dropdown-item">
                  Folders
              </a>
          </div>
      </div>
      <a href="http://www.jthink.net/songkong/help/help.html" class="dropdown-item">
          Help
      </a>
      <a href="http://www.jthink.net/songkong/help.pdf" class="dropdown-item">
          Pdf
      </a>
  </div>
</li>

自定义JS逻辑 #

添加一段简单的JS来处理嵌套下拉的触发，阻止父下拉菜单的关闭事件：

// 监听嵌套下拉的点击事件
document.querySelectorAll('.dropdown .dropdown-toggle').forEach(toggle => {
  toggle.addEventListener('click', function(e) {
    // 阻止事件冒泡，避免父下拉菜单关闭
    e.stopPropagation();
    // 切换子下拉菜单的展开状态
    const dropdownMenu = this.nextElementSibling;
    dropdownMenu.classList.toggle('show');
    // 同步aria-expanded属性
    this.setAttribute('aria-expanded', dropdownMenu.classList.contains('show'));
  });
});

// 点击页面其他区域关闭所有下拉
document.addEventListener('click', function(e) {
  if (!e.target.closest('.dropdown')) {
    document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
      menu.classList.remove('show');
      menu.previousElementSibling.setAttribute('aria-expanded', 'false');
    });
  }
});

补充样式调整 #

为了让子下拉菜单显示在合适位置，添加基础CSS：

.dropdown .dropdown-menu {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.125rem;
}

如果觉得自定义逻辑太繁琐，也可以寻找适配Bootstrap 5的第三方组件库来实现嵌套下拉功能，但注意选择兼容性良好的资源。

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