【发布时间】：2019-09-07 11:08:23
【问题描述】：
我有一个带有下拉菜单的菜单，其中包含另一个下拉菜单。如果我将鼠标悬停在第一个下拉列表上，它会展开。它是通过 css 完成的。但是当我尝试子菜单的css时，它不起作用。所以我添加了javascript来控制在悬停时打开子菜单。这行得通，但是直到我将鼠标移出第一个下拉菜单后，子菜单才会关闭。一旦鼠标离开子菜单项，我希望它关闭。
为了更好地理解这一点，请查看我的jsfiddle。打开菜单并将鼠标悬停在 Shop 项目上，它将展开。然后将鼠标悬停在更多选项项目上，它将展开。如果您将鼠标向上移动到 Sub 2，“更多选项”应该会关闭，但不会。我知道我有 javascript 查看 container-sub-menu1 来关闭它，并且它正在工作，因为它是编码的。但是当我尝试使用 sub-menu1 时它不起作用。有人可以说明当鼠标不在子菜单上时如何关闭子菜单吗？
$("#sub-menu1").on("mouseenter", function() {
// make sure it is not shown:
if (!$(this).parent().hasClass("show")) {
$(this).click();
}
});
$("#container-sub-menu1").on("mouseleave", function() {
// make sure it is shown:
if ($(this).hasClass("show")) {
$(this).children('.dropdown-toggle').first().click();
}
});.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown:hover>.ul.li.dropdown-submenu {
display: block;
}
.nav-subul {
margin-left: 100px;
}
.dropdown-item {
padding-left: 10px;
}
.dropdown-item::first-line {
padding-top: 0px;
}
.dropdown-submenu {
position: relative;
padding-bottom: -10px;
}
.dropdown-submenu>.dropdown-menu {
position: absolute;
top: -20px;
left: 54px;
}<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="mainmenu-container" class="col-sm-<?php echo $content_width; ?> mainmenu-container">
<nav class="navbar navbar-expand-lg navbar-light bg-custom">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Shop
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="container-sub-menu1">
<a class="dropdown-item" href="#">Sub 1</a>
<a class="dropdown-item" href="#">Sub 2</a>
<a class="dropdown-item dropdown-toggle" id="sub-menu1" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More Options
</a>
<div class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink">
<ul class="navbar-nav nav-subul">
<li class="nav-item dropdown">
<div class="dropdown dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Next 1</a>
<a class="dropdown-item" href="#">Next 2</a>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>【问题讨论】：
标签： bootstrap-4 menu hover dropdown