点击.hnf-link2链接时无法精准移除对应.hnf-menu__nav3--hidden类的多级菜单问题求助

你遇到的核心问题是全局选择器导致操作了所有子菜单元素，而不是仅针对当前点击的分类对应的子菜单。让我们一步步修复这个问题：

问题根源 #

你的代码中使用了$('.hnf-menu__nav3')这种全局选择器，它会匹配页面中所有带有该类名的元素，所以点击任何一个.hnf-link2时，所有子菜单的隐藏类都会被移除，导致全部显示。

修复方案 #

我们需要通过$(this)定位到当前被点击的链接，然后精准找到它对应的子菜单元素进行操作，同时可以添加逻辑关闭其他已打开的子菜单，提升交互体验：

修改后的JavaScript代码：

$(".hnf-link").click(function () {
  if ($('.hnf-menu').hasClass('hnf-menu--hidden')) {
    $(".hnf-menu").removeClass('hnf-menu--hidden').addClass('hnf-menu--level2open');
  } else {
    $(".hnf-menu").removeClass('hnf-menu--level2open').addClass('hnf-menu--hidden');
    // 关闭所有子菜单，避免菜单收起后子菜单状态残留
    $(".hnf-menu__nav3").addClass('hnf-menu__nav3--hidden');
    $(".hnf-menu--level2open").removeClass('hnf-menu-wide');
  }
});

$(".hnf-link2").click(function (e) {
  e.preventDefault(); // 阻止链接默认跳转行为，按需保留
  
  // 获取当前点击链接对应的子菜单
  const currentSubMenu = $(this).siblings('.hnf-menu__nav3');
  // 获取所有其他子菜单
  const otherSubMenus = $(".hnf-menu__nav3").not(currentSubMenu);
  
  if (currentSubMenu.hasClass('hnf-menu__nav3--hidden')) {
    // 显示当前子菜单
    currentSubMenu.removeClass('hnf-menu__nav3--hidden');
    // 隐藏其他子菜单
    otherSubMenus.addClass('hnf-menu__nav3--hidden');
    // 扩展菜单宽度
    $(".hnf-menu--level2open").addClass('hnf-menu-wide');
  } else {
    // 点击已打开的菜单时，关闭它并恢复菜单宽度
    currentSubMenu.addClass('hnf-menu__nav3--hidden');
    $(".hnf-menu--level2open").removeClass('hnf-menu-wide');
  }
});

关键修改点说明 #

• $(this)：代表当前被点击的.hnf-link2元素，确保操作的是当前分类对应的元素。
• .siblings('.hnf-menu__nav3')：精准找到当前链接的兄弟元素（也就是对应的子菜单），而不是全局匹配。
• .not(currentSubMenu)：排除当前子菜单，关闭其他已打开的子菜单，避免多个子菜单同时显示。
• e.preventDefault()：阻止链接的默认跳转行为（如果你的链接不需要跳转的话），可以根据实际需求决定是否保留。
• 新增菜单收起时的重置逻辑：确保菜单收起后，所有子菜单都回到隐藏状态，避免状态残留。

你的CSS和HTML代码不需要修改，直接替换上述JavaScript代码即可实现需求：点击某个分类时，仅显示该分类的子菜单，其他分类的子菜单保持隐藏；再次点击已打开的分类可以关闭其对应的子菜单。

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