Question

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

小提琴链接：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毫秒的延迟。但是如果用户将光标从第一主菜单移动到第二主菜单;然后我想立即关闭第一个子菜单，并且不想显示彼此重叠的2个子菜单。当您在第一个主菜单上并进入第二个主菜单时，您可以看到这种重叠效果。

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);
});

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

1 个答案: