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

First dropdown menu not closing after hovering second menu

本文关键字：下拉菜单 第一个 第二个 菜单 悬停      更新时间：2023-09-26

我得到一些问题时，打开菜单u1下拉菜单后直接鼠标在菜单上打开它而不关闭菜单u1。如果我打开菜单并将光标从导航中移出以关闭下拉菜单，然后将鼠标移到菜单上，它就可以正常工作。如果我直接从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

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

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

编辑:我已经抽象了小提琴，所以您可以将data-menu属性添加到nav-items，以指示相关的菜单。

我知道是怎么回事了:

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

请随意提问!

相关文章：