Jquery悬停可以延迟鼠标离开时的隐藏，但如果鼠标在时间限制之前进入，则停止隐藏

Question

我试图在下拉菜单上添加一个延迟，如果这个人说错了将鼠标移到菜单外。我尝试了很多在这里找到的解决方案，但没有一个接缝工作。

编辑：这是jsfiddle的链接，用于一个复杂的示例

编辑：5

$(function () {
            var slideDownTime = 400;
            var firstRun = true;
            var $menu = $('#menu'),
            $submenus = $menu.find('ul'),
            $items = $menu.find('li'),
            hide = function ($el, $instantHide) {
                if (!firstRun) {
                    if (!$instantHide) {
                        // force the menu item to show.
                        $el.css({ visibility: "visible", display: "block" });
                        var hideMenuId = setTimeout(function () {
                            $el.hide().css('visibility', 'hidden');
                        }, 5000);
                        $el.data('hideMenuId', hideMenuId);
                    } else {
                        $el.hide().css('visibility', 'hidden');
                    }
                } else {
                    $el.hide().css('visibility', 'hidden');
                }
            },
            show = function ($el) {
                clearTimeout($el.data('hideMenuId'));
                $el.css('visibility', 'visible').stop(1, 1).slideDown(slideDownTime);
                hide($el.parent().siblings().find("ul"), true); // <-- this line hides the other submenus if hovered.
                var singleLevel = $el.parent().find("ul > li:not(:has(ul)) > a");
                singleLevel.hover(function () {
                    hide($(this).closest("ul").children('li').not(this).find("ul"), true);
                }, function () {
                });
                firstRun = false;
            };
            $menu.focusout(hide($submenus));
            $items.hover(function () {
                show($(this).children('ul'));
            }, function () {
                hide($(this).children('ul'), false);
            });
             // find the root elemement level with no children.
             $menu.find("> li a").not("ul li ul a").not("li:has(ul) > a").hover(function () {
                  //hide the unwantend menu items.
                  hide($(this).closest("ul").children('li').not(this).find("ul"), true);
            }, function () {
            });
 });

好吧，这就是我的结局。但这不是用更少的代码就能实现的吗？

编辑：6jsfiddle链接现在更新到最新版本。

Answer 1

尝试将focusout()与delay()一起使用。此外，我认为您不需要所有的if else逻辑。每个子菜单都是$('#menu')的<ul>子菜单，同时也是<li>的子菜单，因此您可以轻松创建一个函数来显示或隐藏接受jQuery对象作为参数的菜单。如果没有你的html代码，我不能肯定，但像这样的东西应该可以工作。适应您的需求。

var $menu = $('#menu'), // Assuming this is a `<ul>`
    $submenus = $menu.find('ul'),
    $items = $menu.find('li'),
    hide = function($el){ 
        $el.delay(500).hide().css('visibility', 'hidden'); 
    },
    show = function($el){ 
        $el.css('visibility', 'visible').stop(1, 1).slideDown(); 
    };
$menu.focusout(hide($submenus));
$items.hover(function(){
    show($(this).children('ul'));
}, function(){
    hide($(this).children('ul'));
});

还有这个：

element.css('visibility') != "visible" && element.css('display') != "block"

与相同

element.is(':visible')

Answer 2

看看hoverIntent插件。你所需要做的就是包括它，并将你的"悬停"方法更改为"悬停意图"

http://cherne.net/brian/resources/jquery.hoverIntent.html