Question

我试图在我的下拉菜单中添加一个延迟，如果这个人误会的话将鼠标移到菜单外。我在这里尝试了许多解决方案，但没有找到它们接缝工作。

的链接

编辑：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 () {
            });

 });

好的，这就是我最终的结果。但这不能用更少的代码制作吗？

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

Answer 1

尝试将focusout()与delay()一起使用。另外，我认为你不需要if else逻辑。每个子菜单都是<ul> $('#menu')个子项，同时是<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插件。您需要做的就是包含它并将“悬停”方法更改为“hoverIntent”

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

Jquery悬停meny延迟隐藏在mouseleave上但如果鼠标在时间限制之前进入则停止隐藏

2 个答案: