延迟显示下拉菜单内容

jQuery: Delay showing of a dropdown menu content

本文关键字：下拉菜单 显示 延迟      更新时间：2023-09-26

我已经建立了一个下拉菜单，工作良好。它是这样的:

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

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

为什么?

当你将鼠标悬停在"下拉菜单"上并想要选择"我想移动到这里"时:

你必须从"下拉"项开始往下，然后再向右——这是可以的(但不是很有用)。

问题是，当你像图片显示的那样(从"下拉"直接到"我想移动到这里")，你会在路上发现"第三项"，并立即看到属于"第三项"的内容。这不是很好。

如果你能告诉我如何延迟/忽略悬停在我的菜单项很短的时间，我将不胜感激。(我发现了一个很好的例子菜单的行为:http://FEI.com)

可汗学院的Ben Kamens写了一篇关于这个问题的文章，概述了亚马逊是如何解决的。这是一本很棒的读物!

  • http://bjk5.com/post/44698559168/breaking-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 

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

调整"等待"的最佳时机;你可以复制并尝试在你的脚本

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

从这个你需要2行在你的网页上激活悬停正常工作1)加载脚本hoverIntent2)在jQuery

中将hover改为hoverIntent

请尝试setTimeout。

相关文章：