javascript - jQuery：延迟显示下拉菜单内容

Question

我已经建立了一个可以正常工作的下拉菜单。它是这样的：

1. 主菜单项在水平条中，然后
2. 当悬停在任何项目上时，会显示大下拉框（带有子菜单链接）。
3. 这是我的代码：

HTML：

<!-- Based on Bootstrap -->
<div class="navbar navbar-inverse">
    <div class="nav-collapse collapse">
        <ul class="nav">

            <li><a href="#about">First item</a>
                <div id="about-horizontal-submenu" class="horizontal-submenu">

                    <div class="submenu-container span3">
                        <ul>
                            <li><a href="#">Links</a></li>
                            <li><a href="#">Links</a></li>
                        </ul>
                    </div>
                    <!-- and 4x similar div (to have 12 cols) -->
                </div>
            </li>

            <li><a href="#about">Dropdown</a>
                <div id="about-horizontal-submenu" class="horizontal-submenu">
                    <!-- 3x similar div (like above) and then: -->
                    <div class="submenu-container span3">
                        <ul>
                            <li><a href="#">I want to go here</a></li>
                            <li><a href="#">Links</a></li>
                        </ul>
                    </div>
                </div>
            </li>

            <!-- And then goes another main menu item... -->              
            </ul>
        </div>
    </div>
</div>

JS：

jQuery(document).ready(function($) {
    'use strict';

    $('.navbar .nav > li').hover(function() {
        var $el = $(this);
        $el.addClass('hover');
        var $submenu = $el.find('.horizontal-submenu');
        if ($submenu.is(':hidden')) {
            $submenu.slideDown(200);
        }
    }, function() {
        var $el = $(this);
        $el.removeClass('hover');
        var $submenu = $el.find('.horizontal-submenu');
        if ($submenu.is(':visible')) {
            $submenu.hide();
        }
    });
});

---

问题

我想我需要在两者之前添加一点延迟 - 在第一次悬停时向下滑动子菜单和 - 更改子菜单内容（切换/悬停到另一个菜单项时）。

为什么？

当您将鼠标悬停在“下拉菜单”上并想要选择“我想搬到这里”时：

你必须从“Dropdown”项目向下，然后向右——这没关系（但不是很实用）。

问题是，当您按照图像显示的方式进行操作时（从“下拉菜单”直接到“我想搬到这里” - 您在途中遇到“第三项”并立即看到属于“第三项”的内容。这不是很好。

如果您能告诉我如何在很短的时间内延迟/忽略悬停在我的菜单项上，我将不胜感激。（我在http://FEI.com上找到了很好的菜单示例行为）

Answer 1

可汗学院的 Ben Kamens 写了一篇关于这个确切问题的文章，概述了 Amazon.com 是如何解决这个问题的。这是一本很棒的书！

• http://bjk5.com/post/44698559168/break-down-amazons-mega-dropdown

他还整理了一个 jQuery 插件，通过一个工作演示解决了这个问题。你可以在 GitHub 上找到它：

• https://github.com/kamens/jQuery-menu-aim

• http://htmlpreview.github.io/?https://github.com/kamens/jQuery-menu-aim/blob/master/example/example.html

Answer 2

$(function($) {
    var m;
    var timer="";
    var wait=200;
    active=function(){
        $('.navbar .nav > li').mouseover(function() {
            m = $(this);
            if(timer==""){
                test();
                unb();
                timer = setTimeout(reb,wait);            
            }
        });     
    }
    test = function(){
        $(".horizontal-submenu").stop().hide(300);      
        m.find(".horizontal-submenu").stop().show(300);
    };
    unb = function(){
         $('.navbar .nav > li').unbind('mouseover');
    };
    reb = function(){
        timer="";
        active();
    };
    $(".horizontal-submenu").hide(300);
    active();
});

调整“等待”以获得最佳时机；您可以复制并尝试您的脚本。

Answer 3

这可能是您正在寻找的：- http://cherne.net/brian/resources/jquery.hoverIntent.html

由此，您需要在网页上使用 2 行来激活悬停以正常工作 1）加载脚本 hoverIntent 2）在您的 jQuery 中从悬停更改为 hoverIntent

Answer 4

请尝试设置超时。它总能奏效。