如何在悬停而不是点击时打开 Bootstrap 下拉菜单
答案：使用jQuery hover()方法
默认情况下，要在 Bootstrap 中打开或显示下拉菜单，您必须单击触发元素。 但是，如果您想在鼠标悬停而不是单击时显示下拉菜单，您可以使用 CSS 和 jQuery 进行少量自定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Activate Bootstrap Dropdown with Hover</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
.dropdown:hover .dropdown-menu{
display: block;
}
.dropdown-menu{
margin-top: 0;
}
</style>
<script>
$(document).ready(function(){
$(".dropdown").hover(function(){
var dropdownMenu = $(this).children(".dropdown-menu");
if(dropdownMenu.is(":visible")){
dropdownMenu.parent().toggleClass("open");
}
});
});
</script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Sent</a>
<a href="#" class="dropdown-item">Drafts</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>正如您在上面的示例中所见，我们仅在小型、中型和大型设备上使用 CSS 媒体查询 来显示鼠标悬停时的下拉菜单，因为它不适用于手机等超小型设备。 我们还使用了一些 jQuery 来添加 .open 类来突出显示活动的下拉元素。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements