实现 Bootstrap 5 多级下拉垂直导航栏的干净方法是啥？ [复制]

Posted 2023-03-06

【中文标题】实现 Bootstrap 5 多级下拉垂直导航栏的干净方法是啥？ [复制]

【英文标题】：What is the clean way to implement Bootstrap 5 multi-level dropdown vertical navbar? [duplicate]实现 Bootstrap 5 多级下拉垂直导航栏的干净方法是什么？ [复制]

【发布时间】：2021-04-30 22:32:58

【问题描述】：

我想要一个响应式垂直导航栏，我正在尝试通过 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 是否具有满足我要求的内置功能。如果没有，实现这一目标的最简洁方法是什么，最好不更改当前代码（适用于单级下拉菜单，但不适用于多级下拉菜单）？

【参考方案1】：

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

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

【参考方案2】：

好问题！我也仍在解决这个问题。我学到的一件事是，几年前有一个设计决定，下拉菜单只能在点击时起作用，并且父项不可点击。 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/