javascript - 当鼠标不在链接上时，下拉菜单消失

Question

所以我尝试使用 Jquery 制作一个下拉菜单，但是当您尝试选择第二个链接时，菜单消失了。另外，我该如何使其一次只能出现一个下拉菜单？

我需要如何更改它才能修复它？

$('#nav a').bind('mouseover', openSubMenu);
$('#nav ul ul').bind('mouseout', closeSubMenu);
function openSubMenu(){
    $(this).parent().find('ul').slideDown(300);
};
function closeSubMenu(){
    $(this).closest('ul').slideUp(300);
};

示例在这里:https://jsfiddle.net/g36tywLc/

Answer 1

使用mouseleave代替:

$('#nav ul ul').bind('mouseleave', closeSubMenu);

这是更新的fiddle .

来自W3schools :

The mouseout event triggers when the mouse pointer leaves any child elements as well the selected element.
The mouseleave event is only triggered when the mouse pointer leaves the selected element.