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

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

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

/* 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'），以显示/隐藏列表容器的逻辑。

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

2 个答案: