鼠标离开导航栏菜单和下拉框时隐藏下拉框的实现咨询

首先，先帮你理清hover、mouseenter和mouseleave这几个事件的核心区别，这能帮你理解为什么之前的方案走不通：

• mouseenter：鼠标进入目标元素时触发一次，不会因为进入子元素而重复触发（不冒泡）。
• mouseleave：鼠标完全离开目标元素时触发一次，同样不会因为离开子元素而触发（不冒泡）。
• jQuery的hover()：它是mouseenter和mouseleave的快捷写法，你可以传入两个函数——第一个在鼠标进入时执行，第二个在鼠标离开时执行。你之前的代码只传了一个函数，相当于只处理了进入逻辑，完全没处理离开隐藏的逻辑。

你的核心问题是：下拉框和导航菜单项是两个独立元素，鼠标从菜单项移到下拉框时，会触发菜单项的mouseleave，如果直接绑定隐藏，就会导致下拉框还没被鼠标覆盖就消失了。下面给你两种可行的解决方案：

方案1：定时器延迟隐藏（无需修改HTML结构） #

这个方案适合你当前的HTML结构，通过给隐藏动作加一个短延迟，让用户有时间从菜单项移到下拉框：

// 存储定时器ID，用来取消隐藏动作
let dropdownTimeout;

// 封装显示下拉框的逻辑
function showDropdown($menuItem) {
    // 清除之前的定时器，避免误隐藏
    clearTimeout(dropdownTimeout);
    
    var menuChoice = $menuItem.val();
    var menuPosition = $menuItem.find("a").position();
    var dropdownPosition = menuPosition.left;

    // 生成下拉框内容（保留你原有的switch逻辑）
    switch(menuChoice) {
        case 0:
            $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>New Employee Registration</li><li class='submenu-dropdown-each submenu-selected'>Employee List</li><li class='submenu-dropdown-each'>Employee Rehire</li><li class='submenu-dropdown-each'>Employee Without Bank Account</li><li class='submenu-dropdown-each'>Employee Without PPh 21</li>");
            break;
        case 1:
            $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Memo Template</li><li class='submenu-dropdown-each'>Print Memo</li>");
            break;
        case 2:
            $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Download & Upload</li><li class='submenu-dropdown-each'>Send Email</li>");
            break;
        case 3:
            $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Approvals</li><li class='submenu-dropdown-each'>Employment Status Undo</li>");
            break;
        case 4:
            $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Report</li><li class='submenu-dropdown-each'>Headcount Report</li><li class='submenu-dropdown-each'>Employee Recapitulation Report</li>");
            break;
    }

    // 下拉框位置调整逻辑（保留你原有的代码）
    var dropdownWidth = $(".submenu-dropdown").width();
    var rightEdge = $(document).width();

    if ((dropdownPosition + dropdownWidth) >= (rightEdge - 16)) {
        var adjustRight = rightEdge - dropdownWidth - 16;
        $(".submenu-dropdown").css({"left": adjustRight + "px"});
    } else {
        if (dropdownPosition <= 16) {
            $(".submenu-dropdown").css({"left": "16px"});
        } else {
            $(".submenu-dropdown").css({"left": dropdownPosition + "px"});
        }
    }

    $(".submenu-dropdown").show();
}

// 封装隐藏下拉框的逻辑
function hideDropdown() {
    dropdownTimeout = setTimeout(function() {
        $(".submenu-dropdown").hide();
    }, 300); // 300ms的延迟，给用户足够时间移动鼠标
}

// 给导航菜单项绑定事件
$(".navbar-menu-each")
    .mouseenter(function() {
        showDropdown($(this));
    })
    .mouseleave(function() {
        hideDropdown();
    });

// 给下拉框绑定事件
$(".submenu-dropdown")
    .mouseenter(function() {
        clearTimeout(dropdownTimeout); // 鼠标进入下拉框，取消隐藏动作
    })
    .mouseleave(function() {
        hideDropdown(); // 鼠标离开下拉框，触发隐藏
    });

// 保留你原有的点击选中逻辑
$(".navbar-menu-each").click(function() {
    $(".navbar-menu-each").removeClass("menu-on");
    $(this).addClass("menu-on");
});

方案1的工作原理： #

• 当鼠标离开菜单项时，不会立刻隐藏下拉框，而是启动一个300ms的定时器
• 如果在300ms内鼠标进入了下拉框，就清除定时器，下拉框保持显示
• 如果鼠标没进入下拉框，定时器到期后自动隐藏下拉框

方案2：统一父容器监听（更简洁，需微调HTML） #

如果可以调整HTML结构，把每个导航菜单项和对应的下拉框放在同一个父容器里，这样只需要监听父容器的hover事件，逻辑会更简单：

调整后的HTML示例：

<div class="menu-container">
    <li class="navbar-menu-each" value="0">Employee Management</li>
    <!-- 下拉框可以放在这个容器内，也可以保持全局，不影响监听逻辑 -->
</div>

对应的JS代码：

// 封装显示下拉框的函数（和方案1中的showDropdown完全一致）
function showDropdown($menuItem) {
    var menuChoice = $menuItem.val();
    var menuPosition = $menuItem.find("a").position();
    var dropdownPosition = menuPosition.left;

    switch(menuChoice) {
        case 0:
            $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>New Employee Registration</li><li class='submenu-dropdown-each submenu-selected'>Employee List</li><li class='submenu-dropdown-each'>Employee Rehire</li><li class='submenu-dropdown-each'>Employee Without Bank Account</li><li class='submenu-dropdown-each'>Employee Without PPh 21</li>");
            break;
        case 1:
            $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Memo Template</li><li class='submenu-dropdown-each'>Print Memo</li>");
            break;
        case 2:
            $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Download & Upload</li><li class='submenu-dropdown-each'>Send Email</li>");
            break;
        case 3:
            $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Approvals</li><li class='submenu-dropdown-each'>Employment Status Undo</li>");
            break;
        case 4:
            $(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Report</li><li class='submenu-dropdown-each'>Headcount Report</li><li class='submenu-dropdown-each'>Employee Recapitulation Report</li>");
            break;
    }

    var dropdownWidth = $(".submenu-dropdown").width();
    var rightEdge = $(document).width();

    if ((dropdownPosition + dropdownWidth) >= (rightEdge - 16)) {
        var adjustRight = rightEdge - dropdownWidth - 16;
        $(".submenu-dropdown").css({"left": adjustRight + "px"});
    } else {
        if (dropdownPosition <= 16) {
            $(".submenu-dropdown").css({"left": "16px"});
        } else {
            $(".submenu-dropdown").css({"left": dropdownPosition + "px"});
        }
    }

    $(".submenu-dropdown").show();
}

// 监听父容器的hover事件
$(".menu-container").hover(
    // 鼠标进入父容器时显示下拉框
    function() {
        const $menuItem = $(this).find(".navbar-menu-each");
        showDropdown($menuItem);
    },
    // 鼠标离开父容器时隐藏下拉框
    function() {
        $(".submenu-dropdown").hide();
    }
);

// 保留原有的点击选中逻辑
$(".navbar-menu-each").click(function() {
    $(".navbar-menu-each").removeClass("menu-on");
    $(this).addClass("menu-on");
});

方案2的优势： #

父容器的hover事件会覆盖菜单项和下拉框的整个区域，鼠标在两者之间移动时，不会触发mouseleave事件，不需要定时器，逻辑更直观。

为什么CSS的:hover不适用？ #

你提到CSS:hover和位置调整逻辑不兼容，本质是因为CSS:hover只能触发简单的显示/隐藏，而你需要根据菜单项的位置动态计算下拉框的位置，这必须用JS来处理，所以JS事件监听是更合适的选择。

内容的提问来源于stack exchange，提问作者Dolorosa