我一直在编辑引导导航栏示例，并在 head 标签中放入了必要的脚本和 css 链接。我想将默认下拉菜单更改为悬停而不是单击按钮。我尝试通过编写 .dropdown:hover .dropdown menu {display:block;} 来设置 CSS 样式，但它不起作用。我认为这与链接有关，但我不确定。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XXX Dental Clinic</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="../website bootstrap/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-white">
<a class="navbar-brand" href="#"><img src="https://i.pinimg.com/474x/b7/a3/43/b7a3434f363c38d73611694b020a503e.jpg" alt="logo" width="70"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active px-2">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown px-2" >
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown">Our Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">item1</a>
<a class="dropdown-item" href="#">item2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
最佳答案
纯CSS:
li.nav-item.dropdown:hover .dropdown-menu {
display: block;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-white">
<a class="navbar-brand" href="#"><img src="https://i.pinimg.com/474x/b7/a3/43/b7a3434f363c38d73611694b020a503e.jpg" alt="logo" width="70"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active px-2">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown px-2">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Our Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">item1</a>
<a class="dropdown-item" href="#">item2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>jQuery 解决方案:
只需将 .show 类添加到 .dropdown 和 .dropdown-menu
$('li.nav-item.dropdown').hover(function() {
$(this).addClass('show')
$(this).find('.dropdown-menu').addClass('show')
}, function() {
$(this).removeClass('show')
$(this).find('.dropdown-menu').removeClass('show')
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-white">
<a class="navbar-brand" href="#"><img src="https://i.pinimg.com/474x/b7/a3/43/b7a3434f363c38d73611694b020a503e.jpg" alt="logo" width="70"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active px-2">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown px-2">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Our Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">item1</a>
<a class="dropdown-item" href="#">item2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>关于javascript - 如何设置悬停时的 Bootstrap 下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60184294/