第一个下拉菜单在悬停第二个菜单后没有关闭

Question

我在打开menu1下拉菜单时遇到了一些问题，并且在鼠标悬停菜单2后直接打开菜单而不关闭菜单1。 如果我打开menu1并从nav中移出光标关闭下拉菜单，然后将鼠标悬停在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

看到下面提琴概念的一个简单证明： https://jsfiddle.net/ad3a5qyw/2/

编辑： 我抽象的小提琴，所以你可以添加data-menu属性的nav-items指示关联的菜单。

Answer 2

我明白是怎么回事：

这很容易使用jQuery，你已经写了，和这里的代码与新的菜单项为例，说明它是多么容易：https://jsfiddle.net/xyqoj24m/2/

什么继续的是mouseleave函数只在鼠标离开元素时才运行。所以需要做的是处理隐藏/显示菜单，如下所示：

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"); 
    }); 

随意问的问题！