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

Question

在打开menu1下拉菜单时，以及在将鼠标悬停在menu2上以直接打开菜单而不关闭de menu1时，出现了一些问题。 如果我打开menu1并将光标从导航中移出以关闭下拉菜单，然后将鼠标悬停在menu2上，则效果很好。 如果我直接从menu1转到menu2或反之，则menu2下拉菜单会出现在menu1下拉菜单下。 我认为我的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");
     });
});

这里是JSFiddle

Answer 1

我建议为所有菜单.menu添加一个通用的类名，并为每个菜单（ #menu1或.menu1 ）添加一个特定的选择器，并为活动状态.active一个指示符。 这样，您只需关闭所有.menu.active

请参阅以下小提琴作为概念的简单证明： https : //jsfiddle.net/ad3a5qyw/2/

编辑：我已经提要提琴，以便您可以将data-menu属性添加到nav-items以指示关联的菜单。

Answer 2

我看到这里发生了什么：

使用jQuery和您已经编写的代码很容易，这是一个带有新菜单项的示例，以显示它的简单性： https : //jsfiddle.net/xyqoj24m/2/

这是因为mouseleave函数仅在鼠标离开整个 #nav元素时才运行。 所以需要做的是像这样处理菜单的隐藏/显示：

1. 当鼠标悬停在菜单项上时，关闭所有其他下拉菜单并显示正确的下拉菜单。
2. 当鼠标离开下拉菜单或菜单项时，关闭下拉菜单。

看一下这个Javascript ，看看这意味着什么：

  $("#mainbutton").mouseenter(function(){
      $(".menu").stop().slideDown("fast"); 
      $(".menu2").stop().slideUp("fast"); 
      $(".menu3").stop().slideUp("fast");
  });

  $("#secondbutton").mouseenter(function(){
      $(".menu2").stop().slideDown("fast");  
      $(".menu").stop().slideUp("fast"); 
      $(".menu3").stop().slideUp("fast");
  });

  // leave the first menu dropdown
  $("#mainbutton, .menu").mouseleave(function() {
    $(".menu").stop().slideUp("fast");
  });

  // leave the second menu dropdown
  $("#secondbutton, .menu2").mouseleave(function() {
    $(".menu2").stop().slideUp("fast");
  });

随意问的问题！