javascript - 悬停另一个元素时关闭菜单

Question

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

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

请看我的 fiddle :http://www.bootply.com/uEKWCdNj4C

我已经查看了其他问题，这个似乎可能有用，但我无法将其应用于我的情况:Vertical Menu to stay open on hover then close when another is hovered

因此，如果这是重复的，我深表歉意...任何帮助将不胜感激。谢谢!

Answer 1

您可以在打开的 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'); 
  });


});