悬停另一个项目时关闭菜单

Close menu when another item is hovered

本文关键字：菜单 另一个 项目 悬停      更新时间：2023-09-26

我正在创建一个带有两个下拉菜单的菜单。当菜单项悬停在上方时，我需要打开下拉菜单，但如果其他菜单项悬停，则需要关闭下拉菜单。

我遇到的问题是，如果我将鼠标悬停在第二个菜单项上，第一个下拉菜单将关闭。

请看我的小提琴：http://www.bootply.com/uEKWCdNj4C

我已经研究了其他问题，这个问题似乎很有用，但我很难将其应用于我的情况：垂直菜单在悬停时保持打开，然后在另一个悬停时关闭

所以，如果这是重复的，我道歉。。。任何帮助都将不胜感激。谢谢

您可以先在打开的ul上调用slideup，然后再在当前的slidedown上调用。像低于

$(document).ready(function () {
  $(".nav-basic").hover(function () {
      $('ul.menu-applied').slideUp('medium');   
      $('ul.menu-basic').slideDown('medium');
  });
  $('ul.menu-basic').bind('mouseleave', function(){
     $('ul.menu-basic').slideUp('medium'); 
  }); 
  $(".nav-applied").hover(function () {
      $('ul.menu-basic').slideUp('medium');     
      $('ul.menu-applied').slideDown('medium');
  });
  $('ul.menu-applied').bind('mouseleave', function(){
     $('ul.menu-applied').slideUp('medium'); 
  });

});

您只需要更新脚本即可调用slideUp函数：

$(".nav-basic").hover(function () {
      $('ul.menu-basic').slideDown('medium');
     $('ul.menu-applied').slideUp('medium'); 
  });

  $(".nav-applied").hover(function () {    
      $('ul.menu-basic').slideUp('medium');
      $('ul.menu-applied').slideDown('medium');
  });

您的代码可以使用一些优化，但基本上可以在不属于目标类的所有其他$(.menu-interior')元素上调用slideUp()：

示例：$('.menu-interior:not(.menu-basic)').slideUp();

请在此处查看分叉小提琴：http://www.bootply.com/DZxktgUtjh

注意：这将关闭任何其他打开的菜单，而不必在菜单增长时对所有其他类进行硬编码。

因此，在悬停的元素上设置一个class="isHovered"。同时设置框class="isHovered"。。

如果再次调用hover，或者说mouseenter，则检查当前框和另一个框上是否设置了isHovered。。。或者迭代可能存在的任何框。。。

您还可以将当前悬停的元素id存储在变量和框id中。然后使用这些值。由于JS不是多线程的，您可以依赖于执行顺序。。。

 $(document).ready(function() {
     $(".nav-basic").hover(function() {
         $('ul.menu-basic').slideToggle('medium');
     });
     $(".nav-applied").hover(function() {
         $('ul.menu-applied').slideToggle('medium');
     });
 });
相关文章：