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");  
}

这是我的傻瓜：http://jsfiddle.net/bsnubner/

修改

只需将鼠标悬停，用鼠标停留在那里，它就会按预期工作。但是然后尝试将鼠标移动到＆＃34; Hover菜单＆＃34; -Link并立即离开它。即使您不再在菜单中，您也会看到它会自动打开子菜单。更糟糕的是：你必须再次进入菜单内外才能关闭它。

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

如果你能带领我走上正轨，我将非常感激。

Answer 1

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

我简单地补充道：

var startTimer = false;

如果用户意外地悬停了菜单链接，请终止计时器。

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

如果用户悬停“悬停菜单”，它会在超时后弹出。如果他然后悬停“悬停菜单2”并且其他子菜单仍然打开，它将立即打开第二个子菜单。如果用户在短时间内意外地悬停了一个菜单链接，则不会打开它的子菜单。 Onmouseleave它在一段时间后按预期关闭:)）

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

1 个答案: