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

【问题标题】：jQuery: Make submenu appear and disappear after a period of timejQuery：使子菜单在一段时间后出现和消失
【发布时间】：2014-12-03 03:59:43
【问题描述】：

我正在尝试制作一段时间后出现的子菜单。如果它已经打开，我希望其他菜单在悬停时立即弹出。但是，在鼠标离开时，它应该保持打开一小段时间，因为用户可能会不小心将鼠标移到子 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/

编辑：

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

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

如果您能带领我走上正轨，我将不胜感激。

【问题讨论】：

你能用实际运行的代码制作一个 jsfiddle 吗？
谢谢！我添加了小提琴和一些附加信息:)
我仍然不确定您要完成什么，只需将鼠标悬停在“悬停菜单”上时显示子菜单？
嗨，首先我想说我是这样解决的：jsfiddle.net/bsnubner/3 即使我不确定这是否是最好的解决方案。我希望子菜单在某个时间出现。但是，如果我只在它上面悬停一会儿然后退出菜单，我希望它保持隐藏状态。第二件事是，如果有更多项目并且菜单已经打开，第二个链接应该在悬停时立即打开他的子菜单：jsfiddle.net/bsnubner/4

标签： javascript jquery

【解决方案1】：

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

我只是添加了：

var startTimer = false;

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

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

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

【讨论】：