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

问题描述：

我试图做出一段时间后出现的子菜单。如果它已经打开，我希望其他菜单在悬停时立即弹出。但是，鼠标离开时应该保持短时间打开，因为用户可能会意外地将鼠标移动到child-div之外。jQuery：使子菜单出现并在一段时间后消失

那么，问题是，它甚至会打开（在设定的时间后），如果你意外悬停它。这不应该发生。

这里是我的代码：

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吗？ – jbarnett 2014-12-02 17:21:38

谢谢！我已经添加了小提琴和一些额外的信息:) – sleepless 2014-12-02 19:21:52

我仍然不确定你想要完成什么，当你将鼠标悬停在'悬停菜单'上时，只显示子菜单？ – jbarnett 2014-12-02 19:40:16

答

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

我只是说：

var startTimer = false;

并杀死计时器，如果用户不小心徘徊菜单链接。

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

如果用户将鼠标悬停“悬停菜单”，它会在超时后弹出。如果他然后盘旋“悬停菜单2”，而其他子菜单仍然打开，它会立即打开第二个子菜单。如果用户意外暂停一个菜单链接很短的时间，它将不会打开它的子菜单。 Onmouseleave在一段时间后如预期的那样关闭:)

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

相关推荐