jQuery下拉菜单在鼠标移出时消失

我正试图用CSS实现世界上最简单的下拉菜单，并且想用jQuery为它制作一点点动画。但jQuery中的“悬停”功能使得下拉菜单一离开触发元素就会消失（ul＃menu li a），因此您无法从下拉列表中选择任何内容。jQuery下拉菜单在鼠标移出时消失

你可以看到代码和相关的问题在这里： http://jsfiddle.net/Xx2Z7/

我想要的一切，在网上到处搜索，才发现很多人有这个问题，但没有解决方案的工作我，我正在寻找最简单，最清晰的代码。

谢谢。

来源

2012-03-22 Gianfranco

我自己也有这个问题，它隐藏的原因是因为你离开鼠标捕捉器'ul＃menu li a'并且它正在执行悬停（离开）函数。 a标签不会覆盖整个下拉菜单。有几种方法可以解决这个问题，我觉得最好的方法是在标签和'ul.menu'上使用超时。然后当鼠标进入时，清除超时！超时时间只需要几毫秒左右 – 2012-03-22 13:21:01

选中此项：http://jsfiddle.net/Xx2Z7/4/ – 2012-03-22 13:25:41

这就是：

jsFiddle

基本上，我改变了你的js事件，动画，现在只有你的li元素的的mouseenter和鼠标离开控制。 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'); 
    }); 

});

来源

2012-03-22 13:19:34 deantoni

这将不起作用，因为'li'标签隐藏在第一位。标签上必须有一个捕捉器，或者封装li标签 – 2012-03-22 13:22:40

请看一下小提琴，是你想要的行为吗？ – deantoni 2012-03-22 13:23:41

@deantoni请将您的代码发布在您的答案中，所以我们不依赖于小提琴网站。 – Blazemonger 2012-03-22 13:24:07

你几乎在那里。由于您的子菜单是li的孩子，你只需要检测鼠标悬停在li代替锚（鼠标悬停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/

来源

2012-03-22 13:19:52 Blazemonger

您触发了<a>上的悬停，因此当鼠标移出该<a>时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(); 
    }); 

});

来源

2012-03-22 13:53:56

jQuery下拉菜单在鼠标移出时消失

回答

相关问题