我在导航栏中有几个 Bootstrap 3（由于我无法控制的原因必须使用它）下拉菜单，我希望它们的行为类似于应用程序菜单。通常，下拉菜单会在单击时打开，但如果任何其他下拉菜单当前打开，它们也应该在悬停时打开。
奖励：与 Svelte 完美集成的解决方案，我将其用作我的前端框架。
下面是一个例子。如果下拉菜单 2 打开，则悬停时下拉菜单 1 应打开，反之亦然。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 3 Dropdowns</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown 1 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Another action 1</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown 2 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action 2</a></li>
<li><a href="#">Another action 2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>您可以将 jQuery 集成到您的项目中，以实现像这样的简单小行为，并使用 svetle 来处理其他所有事情，因为您在项目中的距离太远，无法迁移到 svetlestrap... jQuery 是轻量级的，可以与 html 中的简单脚本标签集成，所以我想这是错误最少的解决方案
$(document).ready(function() {
var openDropdown = null; // Track the open dropdown
$('.navbar .dropdown').hover(function() {
if (openDropdown) {
$(this).addClass('open');
}
}, function() {
if (!openDropdown) {
$(this).removeClass('open');
}
});
$('.navbar .dropdown').on('show.bs.dropdown', function() {
openDropdown = this;
}).on('hide.bs.dropdown', function() {
openDropdown = null;
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 3 Dropdowns</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown 1 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Another action 1</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown 2 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action 2</a></li>
<li><a href="#">Another action 2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>