如何一起使用 $.hoverIntent 和 setTimeout？

Question

我正在为我的水平下拉导航菜单使用 hoverIntent 插件，因为我希望在打开与当前主菜单关联的子菜单之前延迟几毫秒。我还要求当用户将鼠标指针从当前打开的菜单上移开时，打开的菜单不应立即关闭。

Fiddle link: https://jsfiddle.net/vijayP/tbg2x5h7/6/

所以我想出了以下代码：

    $(document).ready(function(){

    var config = {
            over: function () {
                $(this).addClass("show");
            }, 
            timeout: 300, 
            out: function () {
                var _this = $(this);
                setTimeout(function () {
                    $(_this).removeClass("show");
                }, 300);

            }
        };
    $("ul.drop_menu li").hoverIntent(config);
});

此处菜单在 300 毫秒后打开（添加 show class）。然后悬停；添加了 300 毫秒延迟以避免突然关闭菜单。此代码工作正常，没有问题。我观察到的问题是：

问题： 如果用户离开菜单，那么我希望在关闭子菜单之前延迟 300 毫秒。但是如果用户将光标从第一个主菜单移动到第二个主菜单；然后我想立即关闭第一个子菜单并且不想显示两个相互重叠的子菜单。在 fiddle 中，当您位于第一个主菜单并转到第二个主菜单时，您可以看到这种重叠效果。

Answer 1

当您将鼠标悬停在 li 元素上时，您可以从同级元素中删除 show class。查看更新后的 jsfiddle https://jsfiddle.net/tbg2x5h7/7/

$(document).ready(function(){

    var config = {
            over: function () {
                $(this).siblings().removeClass("show");
                $(this).addClass("show");
            }, 
            timeout: 300, 
            out: function () {
                var _this = $(this);
                setTimeout(function () {
                    $(_this).removeClass("show");
                }, 300);

            }
        };
    $("ul.drop_menu li").hoverIntent(config);
});

如何一起使用 $.hoverIntent 和 setTimeout？

How to use $.hoverIntent and setTimeout together?

javascript

jquery

hoverintent