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

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函数仅在鼠标离开整个 #nav元素时运行。所以需要做的是处理隐藏/显示菜单，如下所示：

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

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

随意提问！

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

2 个答案: