我不知道为什么这不起作用？我正在尝试制作一个下拉菜单，当我将鼠标悬停在页面上时它可以工作，但如果我将鼠标悬停在链接中它就不起作用简而言之，这个下拉列表的作用相反 我需要修复此下拉菜单或更好的方法
HTML
<body>
<div class="wrap">
<nav class="navbar navbar-default navbar-fixed-top navbarcolor ">
<div class="container ">
<div class="navbar-header active">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand Brand-Color active " href="#">MediQ.ch</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-R-C " href="#">AdminStraion</a>
</li>
<li class="dropdown sub-menu-parent">
<a id="drop" href="#" class="navbar-R-C nav-link dropdown-toggle " data-toggle="dropdown" aria-expanded="false">BookMarker
<span class="caret"></span></a>
<ul id="content" class="dropdown-menu " role="menu">
<li><a class="content " href="#">ACETILXSUBSTANCE2</a>
</li>
<li><a class="content " href="#">HIDROCORTIZOLXBENZTIL</a>
</li>
<li><a class="content " href="#">SUBSTANCE3XSUBSTANCE4</a>
</li>
</ul>
</li>
<li><a class="navbar-R-C " href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</body>
CSS
.navbar-R-C:hover {
color: white !important;
}
.content {
color: White !important;
}
.dropdown-menu {
min-width: 250px;
max-width: 250px;
text-align: center;
background-color: #3E606F;
margin-top: -6px !important;
color: white !important;
border-radius: 15px !important;
}
.dropdown-menu > li > a:hover {
text-align: center;
background-color: #EC407A;
font-weight: bold;
margin-left: 7px !important;
margin-right: 7px !important;
display: inline-block;
color: White;
border-radius: 10px !important;
}
.dropdown-menu:after {
position: absolute;
margin-left: 210px;
top: -6px;
left: -30px;
border-right: 10px solid transparent;
border-bottom: 10px solid #3E606F;
border-left: 10px solid transparent;
content: '';
}
.dropdown:hover .dropdown-menu {
display: block;
}
JS
$(document).ready(function() {
$('.wrap nav ul li').hover(function() {
// Toggles slide but stops if not hover anymore
$(this).find('ul').stop().slideToggle();
// Toggles on and of the active class (triangle)
$(this).find('div').toggleClass('active');
}
);
}
);
最佳答案
用这个。它包含您的代码，但一些 css 被 bootstrap css 覆盖，因此您必须覆盖 bootstrap css 才能看起来像您想要的。新的东西是 bootstrap.css、bootstrap.js 和 jquery.js 不要忘记在此处包含这些文件，它直接从网络加载，您可以下载并链接这些文件以供离线使用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.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-default navbar-fixed-top navbarcolor ">
<div class="container ">
<div class="navbar-header active">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand Brand-Color active " href="#">MediQ.ch</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-R-C " href="#">AdminStraion</a>
</li>
<li class="dropdown sub-menu-parent">
<a id="drop" href="#" class="navbar-R-C nav-link dropdown-toggle " data-toggle="dropdown" aria-expanded="false">BookMarker
<span class="caret"></span></a>
<ul id="content" class="dropdown-menu " role="menu">
<li><a class="content " href="#">ACETILXSUBSTANCE2</a>
</li>
<li><a class="content " href="#">HIDROCORTIZOLXBENZTIL</a>
</li>
<li><a class="content " href="#">SUBSTANCE3XSUBSTANCE4</a>
</li>
</ul>
</li>
<li><a class="navbar-R-C " href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>
</body>
</html>
关于javascript - js 下拉菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45725880/