关闭多级 jquery 下拉菜单
Posted
技术标签:
【中文标题】关闭多级 jquery 下拉菜单【英文标题】：Closing multilevel jquery dropdown menu 【发布时间】：2013-01-29 22:15:21 【问题描述】：我有一个下拉菜单，可以在点击时展开而不是悬停。问题是当我打开子菜单时，当我将鼠标从当前子菜单移动到它的父菜单时，我无法关闭它们。它应该一直隐藏到导航栏（顶部）的上一个菜单，并在我离开其任何子菜单并将鼠标悬停在页面主体上时隐藏所有菜单。
小提琴：http://jsfiddle.net/WjE9y/11/
html：
<!-- <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>
JS：
$(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"););
);
);
【问题讨论】：
@Samuel Liew fiddle 添加了。我改变了颜色，所以现在更容易看到。 【参考方案1】：我会给包含任何子菜单的divs 一个像submenu 这样的类：
...
<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");
);
);
Fiddle here.
【讨论】：
完美！感谢大家！堆栈溢出ftw。谢谢@mccannf，您的解决方案运行良好。以上是关于关闭多级 jquery 下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章