0

我创建了一个带有下拉菜单的自定义 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。

我很感激任何关于为什么会发生这种情况的见解，当然还有如何解决它。

4

1 回答 1

2

你试过Superfish菜单 jQuery 插件吗？

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

于 2009-09-22T16:45:16.990 回答