Question

我有一个在Jquery中写的子菜单系统。它工作得很好，但我希望当鼠标离开“顶层菜单”选项时，隐藏子菜单选项会有一点延迟。这是为了让用户有时间鼠标悬停并在子菜单上选择一个选项。目前，用户有时会错过选择子菜单。

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

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

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

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

提前致谢，

艾伦。

Answer 1

请参阅demo

并使用delay()

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

Answer 2

我建议您使用hoverIntent插件：http://cherne.net/brian/resources/jquery.hoverIntent.minified.js

以下是一些文档：http://cherne.net/brian/resources/jquery.hoverIntent.html

这里最大的问题是你的子菜单没有包含在父菜单元素中，所以当你指向你的子菜单时，'父'菜单会调用'鼠标输出'并赢得'保持开放。

如果您有一个由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
});

（抱歉我的英语不好）

Jquery菜单和子菜单延迟

2 个答案: