javascript - 悬停第二个菜单后第一个下拉菜单未关闭

Question

打开 menu1 下拉菜单时遇到一些问题，并且在鼠标悬停在 menu2 上后直接打开它而不关闭 menu1。 如果我打开 menu1 并将光标从导航中移出以关闭下拉菜单，然后将鼠标悬停在 menu2 上，则它可以正常工作。 如果我直接从菜单 1 转到菜单 2 或相反，菜单 2 下拉菜单将出现在菜单 1 下拉菜单下。 我认为我的 html 中有一个错误，或者可以使用 jquery 函数修复它，但我不知道如何解决这个问题。我想添加更多菜单，但实际上只有两个。 我希望你能理解我的问题 任何帮助将不胜感激

$(document).ready(function () {
     var menu = $('.menu')
     menu.hide();
     $("#mainbutton").mouseenter(function(){
       $(".menu").stop().slideDown("fast");
     });
     $("#nav").mouseleave(function(){
       $(".menu").stop().slideUp("fast");
     });

     var menu2 = $('.menu2')
     menu2.hide();
     $("#secondboutton").mouseenter(function(){
       $(".menu2").stop().slideDown("fast");
     });
     $("#nav").mouseleave(function(){
       $(".menu2").stop().slideUp("fast");
     });
});

Here the JSFiddle

Answer 1

我建议为所有菜单添加通用类名.menu，并为每个单独的菜单添加特定选择器(#menu1 或 .menu1) 以及事件状态的指示器 .active。这样你就可以简单地关闭所有 .menu.active

将以下 fiddle 视为简单的概念证明: https://jsfiddle.net/ad3a5qyw/2/

编辑: 我已经抽象了 fiddle ，因此您可以将 data-menu 属性添加到 nav-items 来指示关联的菜单。