当mouseout时，jQuery Dropdown菜单会消失

我试图用CSS来实现世界上最简单的Dropdown，并希望用jQuery对它进行一些动画制作。 但是jQuery中的“hover”function使得下拉一旦离开触发元素（ul＃menu li a）就会消失，因此您无法从下拉列表中选择任何内容。

您可以在此处查看代码和相关问题： http ： //jsfiddle.net/Xx2Z7/

我正在尝试所有的东西，并在网上搜索，只是发现许多其他人遇到了这个问题，但没有一个解决方案适合我，我正在寻找最简单和最清晰的代码。

谢谢。

Answer 1

这里是：

的jsfiddle

基本上，我改变了你的js事件，现在只能通过你的li元素的mouseenter和mouseleave来控制动画。 li包含子菜单，因此即使您离开链接所在的区域，子菜单也将保持可见。

$(document).ready(function() { // Menus $('ul.menu').hide(); $('ul#main-nav li').mouseenter(function() { $('ul.menu', this).animate({opacity: 'show'}, 'slow'); }); $('ul#main-nav li').mouseleave(function() { $('ul.menu', this).animate({opacity: 'hide'}, 'fast'); }); });​ 

Answer 2

你快到了。 由于您的子菜单是li ，因此您只需要检测鼠标hover在li而不是锚点上（将鼠标移到li子上计算为鼠标本身）：

 $('ul#main-nav li').hover(function() { $(this).find('ul.menu').animate({ opacity: 'show' }, 'slow'); }, function() { $(this).find('ul.menu').animate({ opacity: 'hide' }, 'fast'); }); 

http://jsfiddle.net/Xx2Z7/3/

Answer 3

你在上触发了hover，所以当鼠标移出 ，hide（）会触发。

 $(document).ready(function() { // Menus $('ul.menu').hide(); $('ul#main-nav li').hover(function() { $(this).find('ul.menu').animate({opacity: 'show'}, 'slow'); }, function() { $(this).find('ul.menu').animate({opacity: 'hide'}, 'fast'); }); $('ul.menu').mouseenter(function() { $(this).show(); }); $('ul.menu').mouseleave(function() { $(this).hide(); }); });