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

Question

我想要一个响应式的垂直导航栏，我正试着用Bootstrap 5来获得它，我想要多级下拉菜单项。我确信有可能通过向CSS添加自定义代码来实现这一点，并且可以自己创建整个多级下拉功能，但我希望保持尽可能的干净。

我尝试了以下代码，但并没有转到子级别，而是出现了dropdown折叠。

<!-- 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

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

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

Answer 2

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

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