我创建了一个带有下拉菜单的自定义 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。
我很感激任何关于为什么会发生这种情况的见解,当然还有如何解决它。