如何在jQuery中检测两个元素的mouseout？

试着在这里制作一个简单的jquery，这是我的代码到目前为止：

HTML：

 
 Cats 
 
Tigers
 
Lions
 
Leopards
 
 
 
 Dogs 
 
Wolves
 
Dingos
 
Dholes
 
 
  

CSS：

 ul#nav { border: 1px solid #ccc; overflow: hidden; background: #eee; padding: 0; } ul#nav li { display: block; float: left; border-right: 1px solid #ccc; padding: 10px 20px; } ul#nav li ul { display: none; border: 1px solid #ccc; overflow: hidden; position: absolute; background: #eee; width: 100px; padding: 0; margin: 10px 0 0 -20px; border-bottom: none; } ul#nav li ul li { display: block; float: left; width: 100%; border-bottom: 1px solid #ccc; } 

jQuery的：

 $(document).ready(function() { $('ul#nav > li > a').mouseover(function() { $(this).parent().find('ul').slideDown('fast'); }); $('ul#nav > li > a').mouseout(function() { $(this).parent().find('ul').slideUp('fast'); }); }); 

问题是，当用户不再hover在导航链接上时，下拉ul消失了。 如果用户没有hover在导航链接上或hover在下拉列表ul上，我需要它消失。 这该怎么做？

Answer 1

http://jsfiddle.net/Bdpnd/

 $(document).ready(function() { $('ul#nav > li').hover(function() { $(this).children('ul').slideDown('fast'); },function() { $(this).children('ul').stop(true, true).slideUp('fast'); }); }); 

我做了一个hover只是为了缩短它，但主要的是让它下降到li而不是a，因为li会扩展以保存内容，所以你在离开时实际上不会离开li在新的元素。

Answer 2

您的代码在锚点上绑定mouseout，当鼠标离开此时并将鼠标hover在ul上时，mouseout事件将触发。

尝试在ul＃nav> li中绑定事件，用以下代码替换你的代码：

 $('ul#nav > li').mouseenter(function(){ clearTimeout($(this).data('timeoutId')); $(this).find('ul').slideDown('fast'); }).mouseleave(function(){ var someelement = this; var timeoutId = setTimeout(function(){ $(someelement).find('ul').fadeOut("slow");}, 650); $(someelement).data('timeoutId', timeoutId); }); 

您可以确定超时，增加navegability和用户xp