您好，请查看以下 html
$(document).ready(function(){
$(".sub").on({
mouseenter: function (event) {
$(".second.menu").addClass("show");
}
});
$(".no-sub").on({
mouseenter: function (event) {
$(".second.menu").removeClass("show");
}
});
});
.second.menu {
display:none;
margin-top:5px;
}
.show {
display:block !important;
width:100% !important;
overflow:hidden;
background:wheat;
padding:5px;
}
.nav li {
float: left;
min-width: 80px;
border: 1px solid red;
margin-right: 1px;
overflow: hidden;
text-align: center;
list-style: none;
cursor: pointer;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu first">
<ul class="nav">
<li class="no-sub">Home</li>
<li class="sub color" >Color List</li>
<li class="no-sub">Type List</li>
<li class="no-sub">Type</li>
</ul>
</div>
<div class="second menu">
<ul class="nav" id="color">
<li>Green</li>
<li>Blue</li>
<li>Red</li>
</ul>
</div>
</html>
这里一切正常。但问题是，当有人将鼠标悬停在颜色菜单上时，它会显示子菜单。但是，如果它们悬停并转到页面的任何部分，子菜单不会隐藏。我怎样才能做到这一点？请帮助以简单的方式获得解决方案。
Use MouseLeave退出第二个菜单
$(document).ready(function(){
$(".sub").on({
mouseenter: function (event) {
$(".second.menu").addClass("show");
}
});
$(".second.menu").on({
mouseleave: function (event) {
$(".second.menu").removeClass("show");
}
});
$(".no-sub").on({
mouseenter: function (event) {
$(".second.menu").removeClass("show");
}
});
});
.second.menu {
display:none;
margin-top:5px;
}
.show {
display:block !important;
width:100% !important;
overflow:hidden;
background:wheat;
padding:5px;
}
.nav li {
float: left;
min-width: 80px;
border: 1px solid red;
margin-right: 1px;
overflow: hidden;
text-align: center;
list-style: none;
cursor: pointer;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu first">
<ul class="nav">
<li class="no-sub">Home</li>
<li class="sub color" >Color List</li>
<li class="no-sub">Type List</li>
<li class="no-sub">Type</li>
</ul>
</div>
<div class="second menu">
<ul class="nav" id="color">
<li>Green</li>
<li>Blue</li>
<li>Red</li>
</ul>
</div>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
