下拉菜单在悬停时不显示列出的元素
下拉菜单在悬停时不显示列出的元素
提问于 2021-12-18 05:50:40
由于某种原因，这个下拉菜单在悬停时没有显示列出的元素。使用引导。
我是不是漏掉了什么？也许这很简单，但我就是看不见。
<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>
回答 4
Stack Overflow用户
发布于 2021-12-18 07:07:11
在引导程序中，默认情况下鼠标单击下拉运行，如果要在鼠标悬停上显示下拉菜单，则必须使用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>
Stack Overflow用户
发布于 2021-12-18 17:42:48
这里有更多的事情要谈：
- 在BS中的打开下拉列表是由
Popper.js(它不是bootstrap.min.js的一部分)完成的。因此，为了使下拉操作正常工作，您需要通过bundle加载引导JS，其中包含了https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js
由于使用的是
- ，所以需要将
data-toggle="dropdown"更改为data-bs-toggle="dropdown"。这是从版本5开始的新标记.
- 在另一个答案中提到，点击打开下拉菜单(而不是鼠标悬停)是BS哲学的核心部分(不幸)。因此，如果您想在悬停时打开子菜单，则必须添加额外的CSS。
- 也要小心标记。使用BS推荐的导航结构(使用
<ul>、<li>等)
将更加干净。
Stack Overflow用户
发布于 2021-12-18 06:02:07
改变<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>
把它换成一个按钮，然后它就能工作了！！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70401297
复制相关文章
相似问题
腾讯云开发者
