jquery - jQuery 菜单和子菜单延迟

Question

我有一个用 jQuery 编写的子菜单系统。它运作良好，但我希望当鼠标移出“顶部菜单”选项时隐藏子菜单选项会有一点延迟。这是为了让用户有时间将鼠标悬停在子菜单上并选择一个选项。目前，用户有时会错过进行子菜单选择。

我在这里创建了一个 JS 小提琴：

http://jsfiddle.net/K2tub/2/

我认为必须在第 90 行进行更改：

$('ul.fixture-list').slideUp(10);   

我已经玩了将近 2 个小时，但无法延迟隐藏子菜单。

提前致谢，

艾伦。

Answer 1

看演示

并使用延迟（）

  $('ul.fixture-list').delay(500).slideUp(10);   

Answer 2

I suggest you to use the hoverIntent plugin : http://cherne.net/brian/resources/jquery.hoverIntent.minified.js

Here is a few docs : http://cherne.net/brian/resources/jquery.hoverIntent.html

Your biggest problem here is that your sub-menu is not wrap in the parent menu element, so when you're pointing to your sub-menu, the 'parent' menu call the 'mouse-out' event and won't stay open.

Here is an example of something that should work if you had a sub-menu wrapped by the parent menu in the HTML :

http://jsfiddle.net/K2tub/22/

$('#nav').hoverIntent({
    over: function () {
        $('ul', this).stop().slideDown(100);
    },
    out: function () {
        $('ul', this).stop().slideUp(10);
        $('ul.fixture-list').removeAttr('style');
    },
    selector: 'li.matches',
    timeout: 500,
    interval: 10
});

$('#nav li.matches li').hoverIntent({
    over: function () {
        $('div.fixtures').empty();
        $('div.fixtures').prepend('<li>Optinon 2</li>');
        $('ul.fixture-list').slideDown(50);
    },
    out: function () {
        $('ul.fixture-list').slideUp(10);
    },
    selector: 'a.leagueSelect',
    timeout: 500,
    interval: 100
});

(Sorry for my bad english)