什么是实现Bootstrap 5多级下拉垂直导航栏的干净方法？[副本]

Question

我想要一个响应灵敏的垂直导航条，我正试图用Bootstrap5获得它。在这种情况下，我需要多级下拉菜单项。我相信，通过向CSS添加自定义代码并自行创建整个多级下拉功能，可以实现这一点，但我希望尽可能保持干净。

我尝试了以下代码，但是下拉列表崩溃了，而不是进入子级别。

<!-- Sidebar -->
<aside class="col-12 col-md-3 col-xl-2 p-0 bg-dark flex-shrink-1">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark flex-md-column flex-row align-items-center py-2 text-center sticky-top" id="sidebar">
    <div class="text-center p-3">
      <h1 class="h1"><a href="home.php" class="navbar-brand mx-0 font-weight-bold text-nowrap">DrishyamTech</a></h1>
      <h1 class="text-white display-6"><?php echo $current_user_id; ?></h1>
    </div>

    <button type="button" class="navbar-toggler border-0 order-1" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse order-last" id="nav">
      <ul class="navbar-nav flex-column w-100 justify-content-center">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="userHomeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Home
          </a>
          <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end w-100 text-center" aria-labelledby="userHomeDropdown">
            <li><a class="dropdown-item" href="#">New Registration</a></li>
            <li class="dropdown">
              <a class="dropdown-item dropdown-toggle" href="#" id="getTopupDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Get Top-up
              </a>
              <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end w-100 text-center" aria-labelledby="getTopupDropdown">
                <li><a class="dropdown-item" href="#">New Registration</a></li>
                <li><a class="dropdown-item" href="#">New Registration</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    
  </nav>
</aside>

我搜索了很多，但是现在我怀疑BS是否有满足我需求的内置功能。如果没有，什么是实现这一点的最干净的方法，最好是不改变当前代码（适用于单级下拉，但不适用于多级）？

Answer 1

好问题！我也还在弄清楚这一点。我学到的一件事是，几年前有一个设计决定，下拉列表只在点击时起作用，父项目是不可点击的。https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/（通过https://getbootstrap.com/docs/5.0/components/dropdowns/）。

因此，我添加了一些vanillajs来实现悬停显示，同时仍然尽可能多地坚持引导文档：https://mandrasch.github.io/11ty-plain-bootstrap5/

Answer 2

通过添加，触发元素右侧的下拉菜单。dropend到父元素。

无限多级下拉菜单基于Bootstrap 5https://jsfiddle.net/dallaslu/mvk4uhzL/