Question

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

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

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();
        }
    });
});

的问题

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

为什么？

当您将鼠标悬停在“下拉列表”上并想要选择“我想移动到此处”时：

你必须从“下拉”项目向下，然后向右 - 这是好的（但不是很有用）。

问题是，当你像图像一样显示时（从“下拉”直接到“我想要移动到这里” - 你在途中捕捉到“第三项”并且立即看到属于“第三项”的内容项目“。这不是很好。

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

Answer 1

看一下这篇文章：http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown。

Answer 2

来自可汗学院的Ben Kamens写了一篇关于这个确切问题的文章，概述了Amazon.com如何解决它。这是一个很好的阅读！

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

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

Answer 3

$(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 4

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

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

Answer 5

请尝试setTimeout。它总能解决问题。

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

的问题

5 个答案: