Bootstrap 4.1 中悬停时的下拉子菜单

Question

我正在开发一个网站，我想在其中创建一个 下拉子菜单 悬停在 Bootstrap 4.1

我用来在悬停时创建下拉菜单的 HTML 代码是：

<div class="navbar-collapse text-center" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      main menu
    </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">P</a>
        <a class="dropdown-item" href="#">Q</a>
        <a class="dropdown-item" href="#">R</a>
        <a class="dropdown-item" href="#">S</a>
      </div>
    </li>

    <button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>

  </ul>
</div>

上面的 HTML 代码是在悬停时显示 P、Q、R 和 S 的工作代码。

问题陈述：

我想知道现在我应该在上面的代码中进行哪些更改，以便在 S 的 悬停时；显示下拉项 T、U、V 和 W。

Answer 1

您可以应用 inception 概念并在菜单中放回另一个 dropdown-toggle 元素。

要在悬停时打开子菜单，您必须将内容包装在一个容器中，以便在包含子菜单链接的.dropdown-menu 子元素上应用:hover css 样式display:block。

/* makes main-menu open on hover */
.menu-item:hover > .dropdown-menu {
  display: block;
}

/* makes sub-menu S open on hover */
.submenu-item:hover > .dropdown-menu {
  display: block;
}

<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<div class="navbar-collapse text-center" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">

    <li class="menu-item nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        main menu
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">P</a>
        <a class="dropdown-item" href="#">Q</a>
        <a class="dropdown-item" href="#">R</a>
        <div class="submenu-item">
          <a class="dropdown-item dropdown-toggle dropright" href="#" id="navbarDropdownSubMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            S
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownSubMenuLink">
            <a class="dropdown-item" href="#">T</a>
            <a class="dropdown-item" href="#">U</a>
            <a class="dropdown-item" href="#">V</a>
            <a class="dropdown-item" href="#">W</a>
          </div>
        </div>
      </div>
    </li>

    <button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>
  </ul>
</div>

Answer 2

嗯，我想你已经发现默认的 bootstrap 4.1 类是不可能的。

你可以使用一些 jQuery 和 CSS 来达到你想要的效果。

首先，创建一个带有自定义类的 div 和一个包含您需要的项目的列表，在您的情况下为 TUVW。

在 CSS 之后，你可以隐藏你的列表容器并处理它的位置。

在 jQuery 中，您可以跟踪鼠标悬停事件（'mouseenter mouseleave'），将您的逻辑用于显示/隐藏列表容器。