三层菜单弹出未正确隐藏

Question

我一直在开发一个新的三层菜单。前两个是内联的，正如预期的那样工作，但第三个是块元素，没有像我希望的那样工作

$(document).ready(function() {
$('.menu-item').bind('click', function() {
if ($(this).children('ul').length = 0) {
return false;
} else {
$('.parent-menu > li').each(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).children('.child-menu').slideToggle();
}
});
$(this).addClass('active');
$(this).children('.child-menu').slideToggle();
return false;
}
});
$('.menu-item2').hover(function() {
if ($(this).children('ul').length = 0) {
return false;
} else {
$('.child-menu > li').each(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).children('ul').hide();
}
});
if ($(this).children('ul').length > 0) {
$(this).addClass('active');
$(this).children('ul').show();
}
return false;
}
});
});

@charset "utf-8";
/* ---------------------------------------------------------------
HTML5/CSS3 Helix Designs
---------------------------------------------------------------
Version: 1.0
Author: David Booth
Author URI: http://www.helixdesigns.co.uk
License: MIT License
License URI: http://www.opensource.org/licenses/mit-license.php
--------------------------------------------------------------- 
*/
:root {
--background: #A3BDE5;
--highlight: #C2D3EE;
}
body {
margin: 0;
padding: 0;
width: 100%;
}
.parent-menu {
font-family: Cambria;
font-size: 1em;
margin: 0;
padding: 0;
width: 100%;
background: #A3BDE5;
}
ul.parent-menu {
list-style: none;
padding: 0;
margin: 0;
width: auto;
background: #A3BDE5;
}
ul.parent-menu li {
display: inline-block;
width: 113px;
text-align: center;
color: #4183C4;
padding: 5px 8px;
position: relative;
}
ul.parent-menu li {
display: inline-block;
}
ul.parent-menu li.active {
color: #fff;
background: #C2D3EE;
padding: 5px 7px
}
ul.parent-menu li.active:before,
ul.child-menu li.active:before {
content: "";
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
ul.parent-menu li.active:after,
ul.child-menu li.active:after {
content: "";
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
ul.parent-menu li a {
padding: 4px 2px 5px 2px;
text-decoration: none;
}
ul.parent-menu li a:hover,
ul.parent-menu li:hover {
color: #fff;
text-decoration: none;
background: #C2D3EE;
}
ul.parent-menu li ul.child-menu {
width: auto;
position: absolute;
top: 32px;
color: #000;
background-color: whitesmoke;
border-bottom: 1px solid #E1E8ED;
display: none;
}
ul.menu1 {
left: -175px;
right: -85px;
}
ul.menu2 {
left: -310px;
right: -300px;
}
ul.menu3 {
left: 0px;
right: -65px;
padding: 0;
margin: 0;
}
ul.parent-menu li ul.child-menu li {
width: auto;
padding: 5px 6px;
background-color: whitesmoke;
position: relative;
}
ul.parent-menu li ul.child-menu li a {
background-color: whitesmoke;
color: #000;
padding: 5px 6px;
}
ul.parent-menu li ul.child-menu li a:hover {
background: lightgray;
color: #FFF;
padding: 5px 6px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
ul.parent-menu li ul.child-menu li:hover {
background: none;
}
ul.parent-menu a:link,
ul.parent-menu a:visited {
color: #4183C4;
text-decoration: none;
}
ul.parent-menu a:active {
color: #FFF;
text-decoration: none;
}
ul.grandchild-menu {
position: absolute;
left: 0;
top: 30px;
width: 100px;
border: solid thin #000;
background: whitesmoke;
margin: 0;
padding: 5px 3px;
display: none;
}
ul.parent-menu li ul.child-menu li ul.grandchild-menu li {
width: 100%;
background: whitesmoke;
padding: 3px 1px;
}
ul.child-menu li.active:before {
border-bottom: 6px solid #000;
}
ul.child-menu li.active:after {
border-bottom: 6px solid #000;
}
ul.grandchild-menu li {
padding: 0;
margin: 3px 1px;
}
ul.parent-menu li ul.child-menu li ul.grandchild-menu li a {
text-align: left;
padding: 0 20px;
color: #000;
}
ul.parent-menu li ul.child-menu li ul.grandchild-menu li a:hover {
background: lightgray;
border: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.menu-item a {
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<ul class="parent-menu">
<li id="home">
<a>Home</a>
</li>
<li id="administrators" class="menu-item">
<a>Administrators</a>
<ul class="child-menu menu1">
<li>
<a href="add-administrator.php">Add</a>
</li>
<li>
<a href="delete-administrator.php">Delete</a>
</li>
<li>
<a href="diary.php">Diary</a>
</li>
<li>
<a href="list-administrators.php">List</a>
</li>
<li>
<a href="passwords.php?type=administrator">Passwords</a>
</li>
</ul>
</li>
<li id="clients" class="menu-item">
<a>Clients</a>
<ul class="child-menu menu2">
<li class="menu-item2">
<a href="add-client.php">Add</a>
</li>
<li class="menu-item2">
<a href="call-log.php">Call Log</a>
</li>
<li class="menu-item2">
<a href="delete-client.php">Delete</a>
</li>
<li id="finalize" class="menu-item2">
<a href="">Finalize</a>
<ul class="grandchild-menu">
<li>
<a href="setup-domain.php">Domain</a>
</li>
<li>
<a href="setup-host.php">Host</a>
</li>
</ul>
</li>
<li class="menu-item2">
<a href="list-clients.php">List</a>
</li>
<li class="menu-item2">
<a href="message-client.php">Message</a>
</li>
<li class="menu-item2">
<a href="passwords.php?type=client">Passwords</a>
</li>
<li id="payments" class="menu-item2">
<a href="">Payments</a>
<ul class="grandchild-menu">
<li>
<a href="client-payments.php?type=balance">Balance</a>
</li>
<li>
<a href="client-payments.php?type=deposit">Deposit</a>
</li>
</ul>
</li>
<li class="menu-item2">
<a href="setup-client.php">Setup</a>
</li>
</ul>
</li>
<li id="products" class="menu-item">
<a>Products</a>
<ul class="child-menu menu3">
<li>
<a href="add-product.php">Add</a>
</li>
<li>
<a href="delete-product.php">Delete</a>
</li>
<li>
<a href="list-product.php">List</a>
</li>
</ul>
</li>
</ul>
</body>

单击第一级上的一个项目(客户端(以显示第二级，然后将鼠标悬停在此菜单上以查看其运行情况。在此菜单上，"完成"one_answers"付款"有一个下拉菜单。当下拉列表出现并将鼠标移到第二个菜单上后，您可以看到它不会关闭，直到鼠标移开2个项目，下拉列表也不会在鼠标移出时关闭。虽然很近，但我想不通。

如有任何帮助，我们将不胜感激。我已经被这个问题困扰了好几天了。我看了stackoverflow，得到了一些提示。但仍然没有像我希望的那样工作。

jsFiddle

Answer 1

添加一个事件鼠标离开以关闭弹出窗口：

$('.menu-item2').on('mouseleave',function(){
$('.child-menu > li').children('ul').hide();
});

$(document).ready(function() {
$('.menu-item').bind('click', function() {
if ($(this).children('ul').length = 0) {
return false;
} else {
$('.parent-menu > li').each(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).children('.child-menu').slideToggle();
}
});
$(this).addClass('active');
$(this).children('.child-menu').slideToggle();
return false;
}
});
$('.menu-item2').hover(function() {
if ($(this).children('ul').length = 0) {
return false;
} else {
$('.child-menu > li').each(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).children('ul').hide();
} else {
$(this).children('ul').hide();
}
});
if ($(this).children('ul').length > 0) {
$(this).addClass('active');
$(this).children('ul').show();
}
return false;
}
});

$('.menu-item2').on('mouseleave',function(){
$('.child-menu > li').children('ul').hide();
});
});

@charset "utf-8";
/* ---------------------------------------------------------------
HTML5/CSS3 Helix Designs
---------------------------------------------------------------
Version: 1.0
Author: David Booth
Author URI: http://www.helixdesigns.co.uk
License: MIT License
License URI: http://www.opensource.org/licenses/mit-license.php
--------------------------------------------------------------- 
*/
:root {
--background: #A3BDE5;
--highlight: #C2D3EE;
}
body {
margin: 0;
padding: 0;
width: 100%;
}
.parent-menu {
font-family: Cambria;
font-size: 1em;
margin: 0;
padding: 0;
width: 100%;
background: #A3BDE5;
}
ul.parent-menu {
list-style: none;
padding: 0;
margin: 0;
width: auto;
background: #A3BDE5;
}
ul.parent-menu li {
display: inline-block;
width: 113px;
text-align: center;
color: #4183C4;
padding: 5px 8px;
position: relative;
}
ul.parent-menu li {
display: inline-block;
}
ul.parent-menu li.active {
color: #fff;
background: #C2D3EE;
padding: 5px 7px
}
ul.parent-menu li.active:before,
ul.child-menu li.active:before {
content: "";
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
ul.parent-menu li.active:after,
ul.child-menu li.active:after {
content: "";
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
ul.parent-menu li a {
padding: 4px 2px 5px 2px;
text-decoration: none;
}
ul.parent-menu li a:hover,
ul.parent-menu li:hover {
color: #fff;
text-decoration: none;
background: #C2D3EE;
}
ul.parent-menu li ul.child-menu {
width: auto;
position: absolute;
top: 32px;
color: #000;
background-color: whitesmoke;
border-bottom: 1px solid #E1E8ED;
display: none;
}
ul.menu1 {
left: -175px;
right: -85px;
}
ul.menu2 {
left: -310px;
right: -300px;
}
ul.menu3 {
left: 0px;
right: -65px;
padding: 0;
margin: 0;
}
ul.parent-menu li ul.child-menu li {
width: auto;
padding: 5px 6px;
background-color: whitesmoke;
position: relative;
}
ul.parent-menu li ul.child-menu li a {
background-color: whitesmoke;
color: #000;
padding: 5px 6px;
}
ul.parent-menu li ul.child-menu li a:hover {
background: lightgray;
color: #FFF;
padding: 5px 6px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
ul.parent-menu li ul.child-menu li:hover {
background: none;
}
ul.parent-menu a:link,
ul.parent-menu a:visited {
color: #4183C4;
text-decoration: none;
}
ul.parent-menu a:active {
color: #FFF;
text-decoration: none;
}
ul.grandchild-menu {
position: absolute;
left: 0;
top: 30px;
width: 100px;
border: solid thin #000;
background: whitesmoke;
margin: 0;
padding: 5px 3px;
display: none;
}
ul.parent-menu li ul.child-menu li ul.grandchild-menu li {
width: 100%;
background: whitesmoke;
padding: 3px 1px;
}
ul.child-menu li.active:before {
border-bottom: 6px solid #000;
}
ul.child-menu li.active:after {
border-bottom: 6px solid #000;
}
ul.grandchild-menu li {
padding: 0;
margin: 3px 1px;
}
ul.parent-menu li ul.child-menu li ul.grandchild-menu li a {
text-align: left;
padding: 0 20px;
color: #000;
}
ul.parent-menu li ul.child-menu li ul.grandchild-menu li a:hover {
background: lightgray;
border: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.menu-item a {
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<ul class="parent-menu">
<li id="home">
<a>Home</a>
</li>
<li id="administrators" class="menu-item">
<a>Administrators</a>
<ul class="child-menu menu1">
<li>
<a href="add-administrator.php">Add</a>
</li>
<li>
<a href="delete-administrator.php">Delete</a>
</li>
<li>
<a href="diary.php">Diary</a>
</li>
<li>
<a href="list-administrators.php">List</a>
</li>
<li>
<a href="passwords.php?type=administrator">Passwords</a>
</li>
</ul>
</li>
<li id="clients" class="menu-item">
<a>Clients</a>
<ul class="child-menu menu2">
<li class="menu-item2">
<a href="add-client.php">Add</a>
</li>
<li class="menu-item2">
<a href="call-log.php">Call Log</a>
</li>
<li class="menu-item2">
<a href="delete-client.php">Delete</a>
</li>
<li id="finalize" class="menu-item2">
<a href="">Finalize</a>
<ul class="grandchild-menu">
<li>
<a href="setup-domain.php">Domain</a>
</li>
<li>
<a href="setup-host.php">Host</a>
</li>
</ul>
</li>
<li class="menu-item2">
<a href="list-clients.php">List</a>
</li>
<li class="menu-item2">
<a href="message-client.php">Message</a>
</li>
<li class="menu-item2">
<a href="passwords.php?type=client">Passwords</a>
</li>
<li id="payments" class="menu-item2">
<a href="">Payments</a>
<ul class="grandchild-menu">
<li>
<a href="client-payments.php?type=balance">Balance</a>
</li>
<li>
<a href="client-payments.php?type=deposit">Deposit</a>
</li>
</ul>
</li>
<li class="menu-item2">
<a href="setup-client.php">Setup</a>
</li>
</ul>
</li>
<li id="products" class="menu-item">
<a>Products</a>
<ul class="child-menu menu3">
<li>
<a href="add-product.php">Add</a>
</li>
<li>
<a href="delete-product.php">Delete</a>
</li>
<li>
<a href="list-product.php">List</a>
</li>
</ul>
</li>
</ul>
</body>