我创建了一个带有Bootstrap 4的navbar。当我点击一个下拉菜单链接时，它会打开并保持打开状态 - 当我将鼠标悬停在另一个下拉链接上时，它们会重叠。
如果我将鼠标悬停在另一个下拉链接上，我希望它会关闭下拉链接。
以下是我的navbar下拉列表的代码：
.dropdown:hover>.dropdown-menu {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>
Welcome - Maqbool Solutions
</title>
<link rel="shortcut icon" href="../images/favion_Y13_5.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="../../js/function.js"></script>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font/css/font-awesome.css">
</head>
<body>
<div class="container-fluid">
<!--main container-->
<!-- navbar-->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar" style=" height: 80px;">
<div id="logo">
<a href="index.html">
<h3 class="logo_text">Maqbool Solutions</h3>
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto" id="ul">
<li class="nav-item " align="center">
<i class="fa fa-home " aria-hidden="true"></i>
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cubes" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="products/ims/ims.html">Institute Managment Systems</a>
<a class="dropdown-item" href="products/pnms/pnms.html">Pension Managment Systems</a>
<a class="dropdown-item" href="products/pms/pms.html">Property Managment Systems</a>
<a class="dropdown-item" href="products/labms/labms.html">Laboratory Managment Systems</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="products/apps/apps.html">Apps</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cogs" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="services/skill_service.html">Training and Skills</a>
<a class="dropdown-item" href="services/indestrial_services.html">Industry Expertise</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/web_service.html">Web services</a>
<a class="dropdown-item" href="services/software_service.html">Software services</a>
<a class="dropdown-item" href="services/animation_service.html">Animation services</a>
<a class="dropdown-item" href="services/graphic_service.html">Graphic services</a>
<a class="dropdown-item" href="services/game_service.html">Game services</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/apps_service.html">App services</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Training
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="training/soft.html">Software Designing & Development</a>
<a class="dropdown-item" href="training/design.html">Designing & Composing</a>
<a class="dropdown-item" href="training/web.html">Web Designing & Development</a>
<a class="dropdown-item" href="training/animation.html">2D&3D Animation & Development </a>
<a class="dropdown-item" href="training/game.html">Game Development </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="training/app.html">App Development </a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="aboutus/hwr.html">Who we are</a>
<a class="dropdown-item" href="aboutus/our_vision.html">Our vision</a>
<a class="dropdown-item" href="aboutus/our_team.html">Our Team</a>
<a class="dropdown-item" href="aboutus/policy.html">Privacy & Policy</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="career/jobs.html">Jobs</a>
<a class="dropdown-item" href="career/inter.html">Internship</a>
<a class="dropdown-item" href="career/hiring.html">Our Hirring process</a>
</div>
</li>
<li class="nav-item" align="center">
<i class="fa fa-pencil" aria-hidden="true"></i>
<a class="nav-link" href="contect_us.html">Contact Us</a>
</li>
</ul>
</div>
<hr class="col-md-12 nav_hr">
</nav>
<!--end of navbar-->
</div>
</body>
</html>
答案 0 :(得分：2)
您必须在自定义 jQuery 文件中添加以下 js 代码
$('.nav-link').hover(function() {
$(this).closest('.nav-item.dropdown').siblings('.nav-item.dropdown').removeClass('show').find('.dropdown-menu').removeClass('show');
})
问题是当您点击 dropdown link 时，名为 show 的类会添加到 .nav-item.dropdown 和 .dropdown-menu ，因此当您将鼠标悬停在其他人 show时，您必须删除 dropdown link /强>
$('.nav-link').hover(function() {
$(this).closest('.nav-item.dropdown').siblings('.nav-item.dropdown').removeClass('show').find('.dropdown-menu').removeClass('show');
}).dropdown:hover>.dropdown-menu {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>
Welcome - Maqbool Solutions
</title>
<link rel="shortcut icon" href="../images/favion_Y13_5.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<!--main container-->
<!-- navbar-->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar" style=" height: 80px;">
<div id="logo">
<a href="index.html">
<h3 class="logo_text">Maqbool Solutions</h3>
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto" id="ul">
<li class="nav-item " align="center">
<i class="fa fa-home " aria-hidden="true"></i>
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cubes" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="products/ims/ims.html">Institute Managment Systems</a>
<a class="dropdown-item" href="products/pnms/pnms.html">Pension Managment Systems</a>
<a class="dropdown-item" href="products/pms/pms.html">Property Managment Systems</a>
<a class="dropdown-item" href="products/labms/labms.html">Laboratory Managment Systems</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="products/apps/apps.html">Apps</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cogs" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="services/skill_service.html">Training and Skills</a>
<a class="dropdown-item" href="services/indestrial_services.html">Industry Expertise</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/web_service.html">Web services</a>
<a class="dropdown-item" href="services/software_service.html">Software services</a>
<a class="dropdown-item" href="services/animation_service.html">Animation services</a>
<a class="dropdown-item" href="services/graphic_service.html">Graphic services</a>
<a class="dropdown-item" href="services/game_service.html">Game services</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/apps_service.html">App services</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Training
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="training/soft.html">Software Designing & Development</a>
<a class="dropdown-item" href="training/design.html">Designing & Composing</a>
<a class="dropdown-item" href="training/web.html">Web Designing & Development</a>
<a class="dropdown-item" href="training/animation.html">2D&3D Animation & Development </a>
<a class="dropdown-item" href="training/game.html">Game Development </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="training/app.html">App Development </a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="aboutus/hwr.html">Who we are</a>
<a class="dropdown-item" href="aboutus/our_vision.html">Our vision</a>
<a class="dropdown-item" href="aboutus/our_team.html">Our Team</a>
<a class="dropdown-item" href="aboutus/policy.html">Privacy & Policy</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="career/jobs.html">Jobs</a>
<a class="dropdown-item" href="career/inter.html">Internship</a>
<a class="dropdown-item" href="career/hiring.html">Our Hirring process</a>
</div>
</li>
<li class="nav-item" align="center">
<i class="fa fa-pencil" aria-hidden="true"></i>
<a class="nav-link" href="contect_us.html">Contact Us</a>
</li>
</ul>
</div>
<hr class="col-md-12 nav_hr">
</nav>
<!--end of navbar-->
</div>
</body>
</html>
答案 1 :(得分：0)
在您的代码中，触发鼠标悬停或点击事件时，＆＃34;显示＆＃34; class应用于子菜单（下拉菜单）元素。
所以你可以覆盖那个类：
.dropdown-menu.show {
display: none;
}
解决您的问题并仅在悬停时显示菜单项
答案 2 :(得分：0)
简单添加以下CSS行：
.dropdown:hover > .dropdown-menu,
.dropdown:hover > .dropdown-menu.show {
display: block;
}
.dropdown > .dropdown-menu,
.dropdown > .dropdown-menu.show {
display: none;
}