Javascript 当jQuery slideDown/slideUp处于悬停状态时，如何等待上一张幻灯片完成？

我有一个下拉菜单，下拉菜单打开，然后再关闭

$('nav ul li').hover(
     function () {
        $(this).children('.subnav').slideDown(300);
    }, 
     function () {
        $(this).children('.subnav').slideUp(300);
    }
);

如果有人将鼠标悬停在一个项目上，那么在前一个项目向上滑动之前，另一个项目会重叠。如何防止这种重叠，并在允许第二张幻灯片向下滑动之前将上一张幻灯片向上滑动？

也许可以帮助您。
我还开始尝试使用一个布尔变量来检查下一个动画何时被允许，但我没有获得太多成功。所以我提到的最后一个答案可能也是你的答案。
祝你好运