jQuery菜单和子菜单延迟

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

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

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

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

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

提前感谢,

艾伦。

见

和使用

---

我建议您使用hoverIntent插件：

以下是一些文档：

这里最大的问题是子菜单没有包装在父菜单元素中，因此当您指向子菜单时，“父”菜单调用“鼠标退出”事件，并且不会保持打开状态

下面是一个例子，如果您在HTML中有一个子菜单被父菜单包装，那么它应该可以工作：

$（'#nav'）。hoverIntent({
结束：函数（）{
$（'ul'，this.stop（）.slideDown（100）；
},
输出：函数（）{
$（'ul'，this.stop（）.slideUp（10）；
$（'ul.fixture list'）.removeAttr（'style'）；
},
选择器：“li.matches”，
超时：500，
间隔时间：10
});
$（'#nav li.matches li'）。hoverIntent({
结束：函数（）{
$（'div.fixtures'）.empty（）；
$（'div.fixtures'）。前置（'li>optionnon 2'）；
$（'ul.夹具列表'）。向下滑动（50）；
},
输出：函数（）{
$（'ul.fixture list'）。slideUp（10）；
},
选择器：“a.leagueSelect”，
超时：500，
间隔时间：100
});

---

（抱歉我的英语不好）

或者简单地添加.delay（），比如$（'ul.fixture list'）。delay（100）。slideUp（10）@BuDen-我已经尝试了delay（）函数，但它不会延迟子菜单的隐藏，而是延迟子菜单的显示。。。没有任何意义！谢谢，我试过使用delay，但不起作用。我试过你的演示，如果你将鼠标悬停在“主选项4”上，那么“选项2”上的鼠标会立即消失……我也在使用chrome，我认为问题是由第67行引起的：“$（“ul.fixture list”）。removeAttr（‘style’）”-这一行很重要，因为我必须重置以前显示的任何子菜单的高度，例如高度。如果我把这行注释掉，那么延迟对我来说是有效的chrome@Olibo50谢谢，我已经测试了你的小提琴，如果你把鼠标移到主选项2-4上，子菜单就会出现和消失，所以它不能正常工作。子菜单选项应该消失，直到鼠标离开“主选项”菜单。最令人费解的是，为什么这一行导致延迟不起作用：$（'ul.fixture list'）。removeAttr（'style'）@是的，它不能正常工作。这就是我建议您重建HTML的原因。如果你的子菜单列表在每个父菜单项中，那就容易多了。我不太明白。。。在每个父菜单中？你的意思是“fixtures”包装还应该包括manin菜单选项吗？

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

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