Question

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

但是我想创建一种效果，如果你将鼠标移出子菜单，它不会立即消失（例如，如果你用像素超过它）。我在之前的一个问题中意识到了hoverIntent插件，但是在打开兄弟子菜单时它有一个烦人的延迟。所以我从头开始考虑自己的功能。

我的HTML是标准的嵌套列表，ul＃menu＆gt; li> ul＆gt;李。我的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，而当你移动到第二个兄弟时，它仍然是真的。

我很欣赏为什么会发生这种情况，当然还有如何修复它。

Answer 1

您是否尝试过Superfish菜单jQuery插件？

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

在列表项之间移动时，jQuery菜单中断了

1 个答案: