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

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：

  

鼠标指针离开任何子节点时会触发mouseout事件   元素以及所选元素。
  只有当鼠标指针离开所选元素时才会触发mouseleave事件。