在带有子菜单的菜单上需要有关 JQuery 鼠标悬停的帮助

Posted 2023-02-16

【中文标题】在带有子菜单的菜单上需要有关 JQuery 鼠标悬停的帮助

【英文标题】：Need help on JQuery mouseover on menu with submenus

【发布时间】：2011-05-05 07:39:37

【问题描述】：

我有这个菜单 (@ jsFiddle)，如果发生以下鼠标事件，就会发生这种情况：

悬停在Movies 然后开始在Movie library 上拖动鼠标到鼠标悬停 在拖动时不小心触摸了Home 菜单项 导致Home 子菜单出现并隐藏Movies 子菜单。

这不是我想要的效果。所以我正在寻求一些帮助。我该如何解决这个问题，如果我拖动鼠标并且我不小心触摸了其他一些菜单选项，javascript 将足够聪明，知道它不应该隐藏选定的子菜单。

我可以在悬停时添加某种延迟吗？感谢所有帮助！

【参考方案1】：

您可以使用hoverIntent 来限制 mousein/mouseouts 事件以防止意外触发（我认为您需要这个...）。检查 hiverIntent 网站上的示例。你会喜欢的。

【讨论】：

我想尽量减少使用外部库。

当然你可以去看看这个插件源码，拿走你想要的……至少你会得到一些灵感。

您能否提供一个示例，说明如何将插件与我现有的代码集成？ （如果这不是太多要求）

好的。这里是：jsfiddle.net/nilcolor/FRS7A/13 没有 hoverIntent 调整，但它可以工作。

看，hoverIntent 模仿 hover，但添加了一些不错的功能。真的很好。

【参考方案2】：

我认为这个插件完全适合你想做的事情：http://cherne.net/brian/resources/jquery.hoverIntent.html

【参考方案3】：

我希望这是你想要的。如果没有，我相信它会引导您找到最终解决方案

$().ready(function()
    $('ul.menu').hover(function(event)       
        var hoverItem = event.target;
        //hide other ul's submenu
        $(hoverItem).siblings('li').children('ul').stop(true,true).hide()
        //show current submenu
        $(hoverItem).children('ul').stop(true,true).fadeIn()
    ,function(event)
        //console.log(event.target);
        $('ul.menu li').children('ul').stop(true,true).delay(1500).fadeOut()
    )
);

希望对您有所帮助。干杯

【讨论】：

不，不完全是。现在我如果将鼠标悬停在Home 上以到达Movies，则只显示主子菜单。