如何在 Bootstrap 5 中向下拉菜单项添加子菜单？

Question

这是我的代码，我用引导程序及其所有下拉菜单创建了这个导航栏，但我想在网络开发内部的服务下拉部分中添加另一个下拉菜单，但它不能为此提供任何简单的解决方案使用 bootstrap5 完成...

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

            <!-- webDevelopment DropDown -->

            <li id="menu-item-1644" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1644"><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/">Web Development</a>
              <ul class="sub-menu">
                <li id="menu-item-1645" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1645"><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/level-3/">Level 3</a></li>
                <li id="menu-item-1699" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1699"><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/level-3a/">Level 3a</a></li>
                <li id="menu-item-1700" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1700"><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/level-3b/">Level 3b</a></li>
              </ul>
            </li>
           

            <li><a class="dropdown-item" href="#">Software Development</a></li>
            <li><a class="dropdown-item" href="#">Networking and Cloud</a></li>
            <li><a class="dropdown-item" href="#">Cyber Defence and offensive</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">More</a></li>
          </ul>
        </li>

Answer 1

我假设您希望“更多”链接有一个子菜单。只需将另一个菜单放入列表项即可：

<li>
<div class="submenu">
<a class="subnavbtn">Partners <i class="fa fa-caret-down"></i></a>
<div class="submenu-content">
  <a href="#link1">Link 1</a>
  <a href="#link2">Link 2</a>
  <a href="#link3">Link 3</a>
  <a href="#link4">Link 4</a>
</div>
</li>

随心所欲地设计它， 并使用CSS使其不可见且绝对：

.submenu-content {
  display: none;
  z-index: 1;
  position: absolute;
}

当链接悬停时使其可见：

.subnav:hover .subnav-content {
  display: inline;
}

Answer 2

这就是我找到的答案，但请注意，这仅适用于 bootstrap 5。

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

            <!-- webDevelopment DropDown -->

            <li>
              <a class="dropdown-item" href="#">Web Development</a>
              <ul class="dropdown-menu dropdown-submenu">
                <li>
                  <a class="dropdown-item" href="#">Submenu Submenu item 1</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Submenu Submenu item 2</a>
                  
                </ul>
                </li>
            

            <li><a class="dropdown-item" href="#">Software Development</a></li>
            <li><a class="dropdown-item" href="#">Networking and Cloud</a></li>
            <li><a class="dropdown-item" href="#">Cyber Defence and offensive</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">More</a></li>
          </ul>
        </li>

CSS：

.dropdown-menu li {
  position: relative;
} 

.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}

.dropdown-menu>li:hover>.dropdown-submenu {
  display: block;
}

Answer 3

您仍然可以使用 bootstrap 来定位子菜单，而不是覆盖定位样式。只需在链接上使用 data-bs-toggle="dropdown" 像往常一样触发子菜单。您必须添加一些 JS 来在触发子菜单的链接的单击处理程序上调用 stopPropagation()，以阻止菜单在单击时立即消失。 在父级上使用“dropend”将子菜单放置在链接的右侧。 还可以使用 data-bs-display="static" 禁用动态 popper.js 定位。这是因为子菜单绝对相对于主菜单定位，并且 popper.js 会计算出该父菜单中没有足够的空间容纳子菜单，这将导致它错误地重新定位子菜单。

HTML 片段

<li class="dropend" id="menu-item-1644">
  <a href="#" data-bs-display="static" data-bs-toggle="dropdown" aria-expanded="false">Web Development</a>
  <ul class="dropdown-menu sub-menu">
    <li id="menu-item-1645"><a href="#">Level 3</a></li>
    <li id="menu-item-1699"><a href="#">Level 3a</a></li>
    <li id="menu-item-1700"><a href="#">Level 3b</a></li>
  </ul>
</li>

JS

document.querySelectorAll('.dropdown-menu a').forEach(function(element) { 
  let nextEl = element.nextElementSibling;
  if(nextEl && nextEl.classList.contains('sub-menu')) { 
    element.addEventListener('click', function (e) {
      // prevent opening link if link needs to open dropdown
      e.preventDefault();
      e.stopPropagation();
    });
  }
})