jQuery导航子菜单鼠标移出后自动关闭，如何调整实现子菜单保持展开

问题原因 #

当前代码给.nav-main-item绑定了mouseout事件，只要鼠标离开该元素就会移除active类，导致子菜单直接收起。 #

方案1：子菜单hover展开后永久保持 #

直接删除mouseout对应的事件监听即可，修改后JS代码如下：

jQuery("#test_test").each(function() {
    jQuery(this).children(".nav-main-item").mouseover(function() {
        // 若需要每次hover仅展开当前菜单、关闭其他同级菜单，可取消注释下一行
        // jQuery(this).siblings().children(".nav-drop").removeClass('active');
        jQuery(this).children(".nav-drop").addClass('active');
    });
});  

方案2：仅鼠标完全离开「主菜单项+子菜单」整体区域时才关闭（常规多级菜单交互逻辑） #

调整事件绑定逻辑，增加延迟判断避免鼠标移到子菜单时误触发关闭：

jQuery("#test_test").each(function() {
    const $mainItem = jQuery(this).children(".nav-main-item");
    let closeTimer = null;

    // 用mouseenter替代mouseover，避免子元素事件冒泡导致重复触发
    $mainItem.mouseenter(function() {
        clearTimeout(closeTimer);
        jQuery(this).children(".nav-drop").addClass('active');
    });

    $mainItem.mouseleave(function() {
        const $drop = jQuery(this).children(".nav-drop");
        closeTimer = setTimeout(() => {
            $drop.removeClass('active');
        }, 200);

        // 鼠标移入子菜单时清除关闭定时器
        $drop.mouseenter(() => {
            clearTimeout(closeTimer);
        });

        // 鼠标离开子菜单时再次触发延迟关闭
        $drop.mouseleave(() => {
            closeTimer = setTimeout(() => {
                $drop.removeClass('active');
            }, 200);
        });
    });
});  

配套CSS调整 #

需要给主菜单项设置相对定位，保证子菜单的绝对定位相对于主菜单项生效，避免交互区域错位：

.nav-main > li.nav-main-item {
    position: relative;
}

内容的提问来源于stack exchange，提问作者ΝΙΚΟΛΑΟΣ ΚΟΥΚΗΣ