悬停时下拉菜单不显示列出的元素

Posted 2023-03-05

【中文标题】悬停时下拉菜单不显示列出的元素

【英文标题】：Dropdown menu not showing the listed elements when hovered

【发布时间】：2022-01-20 20:37:03

【问题描述】：

由于某种原因，此下拉菜单在悬停时未显示列出的元素。使用引导程序。

我在这里遗漏了什么吗？也许这很简单，但我就是看不到。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- Services -->
<li class="nav-item dropdown">

  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>

  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <h6 class="dropdown-header">Dropdown header</h6>
    <a class="dropdown-item" href="#">Rewiring</a>
    <a class="dropdown-item" href="#">Light Fixes</a>
    <a class="dropdown-item" href="#">Showers</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Rewiring</a>
    <a class="dropdown-item" href="#">Light Fixes</a>
    <a class="dropdown-item" href="#">Showers</a>
  </div>
</li>

【问题讨论】：

能否也添加注册此悬停动作的 CSS？

我给你做了一个sn-p。请将其更改为 minimal reproducible example 并标记引导版本

【参考方案1】：

更改<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>

到

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button>

把它改成一个按钮就可以了！！

【参考方案2】：

在 Bootstrap 中，下拉菜单默认在鼠标点击时运行，如果你想在鼠标悬停时显示下拉菜单，那么你必须使用 css 或 js

我用过css

.dropdown:hover ul.dropdown-menu display: block; 

.dropdown:hover ul.dropdown-menu display: block; 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Services
    </button>
    <ul class="dropdown-menu">
      <li><h6 class="dropdown-header">Dropdown header</h6></li>
      <li><a class="dropdown-item" href="#">Rewiring</a></li>
      <li><a class="dropdown-item" href="#">Light Fixes</a></li>
      <li><a class="dropdown-item" href="#">Showers</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Rewiring</a></li>
      <li><a class="dropdown-item" href="#">Light Fixes</a></li>
      <li><a class="dropdown-item" href="#">Showers</a></li>
    </ul>
  </div>

【参考方案3】：

这里有更多要讨论的事情：

BS 中的打开下拉菜单由Popper.js 完成（不属于bootstrap.min.js）。因此，为了使下拉菜单正常工作，您需要通过 bundle 加载 Bootstrap JS，其中包含 Popper.js https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js

由于您使用的是BS5，您需要将data-toggle="dropdown"更改为data-bs-toggle="dropdown"。这是从版本 5 开始的新标记。

正如另一个答案中提到的，单击（而不是悬停）打开下拉菜单是 BS 哲学的核心部分（不幸的是）。因此，如果您想在悬停时打开子菜单，则必须添加额外的 CSS。

还要小心标记。使用BS推荐的结构进行导航会更干净（使用<ul>，<li>等）

【参考方案4】：

我找到了解决办法：

这是造成麻烦的线路。

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>

我只是通过 Bootstrap 添加了以下内容：

aria-haspopup="true" aria-expanded="false"