在列表项之间移动时 jQuery 菜单损坏

Question

我创建了一个带有下拉菜单的自定义 jQuery 水平菜单。最初它只是在悬停在列表项上时淡入子菜单，并在移开时淡出。

但是我想创建一个效果，如果您将鼠标移出子菜单，它不会立即消失（例如，如果您超出了一个像素）。我在上一个问题中了解到 hoverIntent 插件，但是在打开同级子菜单时它会出现令人讨厌的延迟。所以我从头开始考虑自己的功能。

我的 HTML 是一个标准的嵌套列表，ul#menu > li > ul > li。我的 Javascript 如下：

var menuVisible = false;
var cancelTimeout = false;

$(document).ready(function(){
  $('ul#menu > li').hover(
    function(){
      menuMouseOver( $(this) );
    },
    function(){
      menuMouseOut( $(this) );
    }  
  );
});

function menuMouseOver( $li )
{
  // if one of the menus is down, check which one we're hovering
  if ( menuVisible ) {
    cancelTimeout = true;  
    if ( $li.find('>ul').css('display') == 'block' ) {
      // do nothing if we're hovering over current menu
    }
    else {
      // turn off all menus
      $li.parent().find('>li').each( function() {
        menuOff( $li )
      });
    }
  }

  menuOn( $li );
  menuVisible = true;
}

function menuMouseOut( $li )
{
  setTimeout( 
    function(){
      if ( !cancelTimeout ) {
        menuOff( $li );
        menuVisible = false;
      }
      cancelTimeout = false;
    },
    2000
  );

}

function menuOn( $li )
{
  $li.css('background-position', 'left bottom');
  $li.find('>ul').fadeIn('fast');
}
function menuOff( $li )
{
  $li.css('background-position', 'left top');
  $li.find('>ul').fadeOut('fast');
}

以下事情起作用：

• 在顶级li 上移动会打开子菜单。
• 离开子菜单会在 2 秒后将其关闭（用于测试目的；将在最终版本中减少）。
• 离开子菜单并返回会取消超时，从而阻止菜单消失

但是，这些不起作用：

• 当从一个顶级列表项移动到下一个时，上一个子菜单不会消失。我希望它立即淡出，没有正常的延迟。
• 如果我在两个顶级列表项之间移动，menuVisible 被设置为false，这会搞砸系统。这是因为cancelTimeout 在您移到第一个同级时设置为 true，当您移到第二个同级时它仍然为 true。

我希望能深入了解为什么会发生这种情况，当然还有如何解决它。

Answer 1

你试过Superfish菜单jQuery插件吗？

我在我的项目中使用过它，我认为它会为你解决这些问题。