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

jQuery: Make submenu appear and disappear after a period of time

本文关键字：消失 一段时间 菜单 jQuery      更新时间：2023-09-26

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

编辑：

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

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

如果您能带领我走上正确的道路，我将不胜感激。

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

我只是简单地补充说：

var startTimer = false;

如果用户不小心悬停了菜单链接，则杀死计时器。

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

如果用户将鼠标悬停在"悬停菜单"上，它将在超时后弹出。如果他随后将鼠标悬停在"悬停菜单 2"并且另一个子菜单仍然打开，它将立即打开第二个子菜单，而不会延迟。如果用户不小心将一个菜单链接悬停在短时间内，它将不会打开其子菜单。在鼠标离开一段时间后，它会按预期关闭:)

相关文章：