Javascript 关闭多级jquery下拉菜单
我有一个下拉菜单,可以在单击时展开,而不是悬停。问题是,当我打开子菜单时,当我将鼠标从当前子菜单移动到其父菜单时,无法让它们关闭。它应该隐藏上一个菜单直到导航按钮,并且在我离开它的任何子菜单并将鼠标悬停在页面主体上时隐藏所有菜单 小提琴: HTML: 我会给包含任何子菜单的div一个类类似的子菜单:Javascript 关闭多级jquery下拉菜单,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个下拉菜单,可以在单击时展开,而不是悬停。问题是,当我打开子菜单时,当我将鼠标从当前子菜单移动到其父菜单时,无法让它们关闭。它应该隐藏上一个菜单直到导航按钮,并且在我离开它的任何子菜单并将鼠标悬停在页面主体上时隐藏所有菜单 小提琴: HTML: 我会给包含任何子菜单的div一个类类似的子菜单: .@Samuel Liew fiddle补充道。我改变了颜色,所以现在更容易看到。太好了!谢谢大家!堆栈溢出ftw。谢谢@mccannf您的解决方案非常有效。 <!-- <LINK RE
.@Samuel Liew fiddle补充道。我改变了颜色,所以现在更容易看到。太好了!谢谢大家!堆栈溢出ftw。谢谢@mccannf您的解决方案非常有效。
<!-- <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> -->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="includes/menu.js"></script></script>
<link type="text/css" href="includes/menu.css" rel="stylesheet" />
</head>
<body>
<div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;">
<div id="menuJQ">
<ul class="menuJQ">
<li class="parent"><a href="#"><span>Home</span></a></li>
<li><a class="parent" href="#"><span>Product View</span></a>
<div>
<ul>
<li><a href="#"><span>DevTask Search</span></a></li>
<li><a href="#"><span>Active Machines</span></a></li>
</ul>
</div>
</li>
<li class="parent"><a href="#"><span>Request Tool</span></a></li>
<li><a href="#" class="parent"><span>Search</span></a>
<div>
<ul>
<li><a href="#"><span>DevTask Search</span></a></li>
<li><a href="#"><span>Active Machines</span></a></li>
<li><a href="#"><span>Integrity Query</span></a></li>
<li><a href="#"><span>Internal DevTasks</span></a></li>
<li><a href="#" class="parent"><span>Results</span></a>
<div>
<ul>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a>
<div>
<ul>
<li><a href="#"><span>DevTask Search</span></a></li>
<li><a href="#"><span>Active Machines</span></a></li>
<li><a href="#"><span>Integrity Query</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#"><span>Issues for Stability Team</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
$(document).ready(function(){
$(function() {
$('#menuJQ > ul li').click(function(e) {
e.preventDefault();
$('ul:first', this).show();
});
});
var submenu_active = false;
$('#menuJQ ul').mouseenter(function() {
submenu_active = true;
});
$('#menuJQ ul').mouseleave(function() {
submenu_active = false;
setTimeout(function() {
if (submenu_active === false) $('ul', this).hide("fast");});
});
});
...
<li><a href="#" class="parent"><span>Search</span></a>
<div id="submenu">
<ul>
...
$(document).ready(function(){
$(function() {
$('#menuJQ > ul li').click(function(e) {
e.preventDefault();
$('ul:first', this).show();
});
});
$('.submenu').mouseleave(function() {
$('ul', this).hide("fast");
});
});