我希望导航栏按钮悬停下拉效果仅在单击其中一个导航栏按钮后激活。之后，一旦点击外部像身体悬停再次应该被禁用。目前悬停正在工作，如果我在它周围移动鼠标，它会激活(因此悬停效果(，但如果用户打算不使用导航栏，这可能会很烦人。
因此，通常当悬停在导航栏上时，按钮不应下拉任何列表。但是一旦单击任何导航栏按钮，直到您单击侧面，就像正文一样，所有导航栏按钮都应该像正常一样悬停。我尝试了一些jQuery，但没有成功。
<!DOCTYPE html>
<html lang="en">
<head>
<title>BAPTIST</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./headerAndFooter.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav top-nav pull-right">
<div class="dropdown">
<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> About Us</a></li>
<div class="dropdown-content">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
<a href="#">Separated link</a>
<a href="#">One more separated link</a>
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Providers</a></li>
<div class="dropdown-content">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
<a href="#">Separated link</a>
<a href="#">One more separated link</a>
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Payors</a></li>
<div class="dropdown-content">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
<a href="#">Separated link</a>
<a href="#">One more separated link</a>
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Employers</a></li>
<div class="dropdown-content">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
<a href="#">Separated link</a>
<a href="#">One more separated link</a>
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Patients</a></li>
<div class="dropdown-content">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
<a href="#">Separated link</a>
<a href="#">One more separated link</a>
</div>
</div>
</ul>
</div>
</div>
</nav>
</body>
</html>在没有您拥有的所有 css 的情况下，我无法让您的导航栏工作，所以我使用了网站上的通用 Bootstrap 3 导航栏向您展示。
下面的代码是这样的：
- 每当单击导航内的链接标签时，它都会将变量 allowHover 设置为 true。
- 每当用户鼠标进入具有"内容"类的div 时，allowHover 都会设置为 false。
我相信其他两个功能是不言自明的，但如果它们需要解释，请告诉我。
let allowHover = false
$('nav a').click(function() {
allowHover = true
})
$('.content').mouseenter(function() {
allowHover = false
})
$('ul.nav .dropdown').hover(function() {
if(allowHover)
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn('fast');
})
$('ul.nav .dropdown').mouseleave(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut('fast');
})
查看代码笔。请确保在单击导航中的常规链接时，不要将鼠标移到导航栏之外，否则下拉列表将不起作用。
这是您所要求的一个接近的例子，但我认为它足以让您到达需要的地方，以使自己的演绎工作。