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

Question

这个问题在这里已经有了答案:





Bootstrap dropdown sub menu missing

(9 个回答)


3个月前关闭。




我想要一个响应式垂直导航栏，我正在尝试使用 Bootstrap 5 获得它。在那，我想要多级下拉菜单项。我确信可以通过向 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

通过添加 .dropend 触发元素右侧的下拉菜单到父元素。
基于 Bootstrap 5 的无限多级下拉菜单
https://jsfiddle.net/dallaslu/mvk4uhzL/