javascript - jQuery:使子菜单出现并在一段时间后消失

Question

我正在尝试制作一个在一段时间后出现的子菜单。如果它已经打开，我希望其他菜单在悬停时立即弹出。但是，在鼠标离开时，它应该保持打开状态一小段时间，因为用户可能意外地将鼠标移到子 div 之外。

问题是，如果您不小心将其悬停在其上，它甚至会打开(在设定时间之后)。这不应该发生。

这是我的代码:

var timer = false;
$('li.mega-menu-dropdown').hover(function(e){
    var el = this;

    if ($("li.mega-menu-dropdown.open").length == 0)
    {                     
        setTimeout(function() {
            openMenu(el);
        }, 1000); 
    } else {
        clearTimeout(timer);  
        openMenu(el);
    }
},
function(){ 
    timer = setTimeout(function(){
        $('li.mega-menu-dropdown').removeClass('open');   
    },300);
});

function openMenu(el) {
    $('li.mega-menu-dropdown').removeClass('open');
    $(el).toggleClass("open");  
}

这是我的jsfiddle:http://jsfiddle.net/bsnubner/

编辑:

只需将其悬停并用鼠标停留在那里，它就会按预期工作。但然后尝试将鼠标移到“悬停菜单”链接上并立即离开它。您会看到，即使您不再位于菜单中，它也会自动打开子菜单。更糟糕的是:您必须再次进入菜单内外才能将其关闭。

问题是，悬停时它会通过函数调用设置超时。这将在设定时间后执行该功能 - 即使您不再在菜单中。但我怎样才能阻止它呢？

如果您能引导我走上正确的道路，我将非常感激。

Answer 1

好吧，如果你没有更好的解决方案，我的解决方案如下:

我只是添加了:

var startTimer = false;

如果用户不小心将鼠标悬停在菜单链接上，则终止计时器。

http://www.jsfiddle.net/bsnubner/4

如果用户将鼠标悬停在“悬停菜单”上，它将在超时后弹出。如果他随后将鼠标悬停在“悬停菜单 2”上并且另一个子菜单仍然打开，它将立即打开第二个子菜单，不会有任何延迟。 如果用户意外地将一个菜单链接悬停一小会儿，则不会打开其子菜单。 Onmouseleave 一段时间后它会按预期关闭:)