使用jQuery实现三级下拉菜单hover显示，修复现有代码Bug

问题回顾 #

当前代码存在两个核心问题：

• show-submenu 错误添加到带show类的父级菜单，而非当前悬停菜单项的子菜单
• 切换菜单项时未清除旧的show-submenu类，导致同一时间多个菜单触发显示

修复后的代码 #

// 悬停父菜单项时处理子菜单显示
$('.nav-item.dropdown').hover(function() {
    // 先移除所有已存在的show-submenu类，确保唯一显示
    $('.show-submenu').removeClass('show-submenu');
    // 精准定位当前悬停li的子级dropdown-menu，添加类
    $(this).find('.dropdown-menu').addClass('show-submenu');
}, function() {
    // 鼠标离开时，移除当前元素子菜单的show-submenu类
    $(this).find('.dropdown-menu').removeClass('show-submenu');
});

// 点击菜单外部时，清除所有show-submenu类
$(document).on('click', function(e) {
    if (!$(e.target).closest('.nav-item.dropdown').length) {
        $('.show-submenu').removeClass('show-submenu');
    }
});

关键修复点说明 #

• 精准定位子菜单：使用$(this).find('.dropdown-menu')替代全局查找带show类的菜单，确保只操作当前悬停菜单项的子级菜单，解决类加错父级的问题。
• 保证唯一显示：每次触发悬停时先调用$('.show-submenu').removeClass('show-submenu')清除所有已激活的子菜单，再给当前目标添加类，避免多个菜单同时显示。
• 外部点击处理：通过closest判断点击区域是否在菜单内，不在则清除所有show-submenu类，确保点击外部时菜单收起。

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