需要有关子菜单功能、超时的帮助

Question

我正在为 Intranet 系统开发这个菜单。我有一个部分工作的菜单系统。

我已将代码添加到此处： http://jsbin.com/eloxe3/8

菜单项浅灰色背景有一个子菜单...而其他则没有。当我将鼠标悬停在没有子菜单的链接上 1 秒后，我需要一些帮助来使子菜单消失。

我有这个显示子菜单的功能...&希望新代码遵循类似的原则

$(".menu-arrow").hover(function(){
    $.data(this, "timer", setTimeout($.proxy(function() {
       $(this).click();
   },this),500));
},function(){
    clearTimeout($.data(this, "timer"));
});

...（抱歉，该内联网的用户是新手...以防万一他们意外地翻转链接）

非常感谢任何帮助，谢谢

Answer 1

查看源代码，您应该将 no-submenu 与悬停状态绑定。

$('.no-submenu').bind('mouseenter',function(){
    //at this point the mouse is over a link with no submenu.
    //So we close all submenus
    $('.rtmenu').hide().delay(1000);
})

我不确定天气延迟是否适用于 hide，但您可以尝试一下，如果不行，请尝试以下操作：

$('.no-submenu').bind('mouseenter',function(){
    //at this point the mouse is over a link with no submenu.
    //So we close all submenus

    var T = setTimeout(function(){
         $('.rtmenu').hide();
         clearTimeout(T);
    },1000)
});

我的做法可能是错的，但您无论如何都可以尝试一下。

对 clearTimeout 的一个小更新

尝试按照以下方式进行一些操作：

var _TimeOut;
$('.no-submenu').hover(,function(){
    var _TimeOut = setTimeout(function(){$('.rtmenu').hide();},1000)
},function(){
    clearTimeout(_TimeOut);
});

只是不是 $('.rtmenu').hide() 可能需要是 $('.level2').hide() 并且您可能更好地使用 .css('display','none')

悬停文档在这里：http://api.jquery.com/hover/

Answer 2

查看 hoverIntent 插件。仅当光标悬停在元素上时才会触发。

var hideSubmenus = function () {
    $('.rtmenu').hide()
};

$(".no-submenu").hoverIntent({
    over: hideSubmenus,
    out: function () { /* do nothing */ }
});

这样，如果他们不小心将光标移出菜单然后又快速返回，子菜单就不会被隐藏，根据我的经验，这通常是子菜单的问题。