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

Question

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

fiddle 链接: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 类)。悬停时；添加了 300 毫秒延迟以避免菜单突然关闭。这段代码工作正常，没有任何问题。我观察到的问题是:

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

Answer 1

当您将鼠标悬停在 li 元素上时，您只需从同级元素中删除 show 类即可。查看更新后的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);
});