显示子菜单并隐藏父菜单时返回链接失效问题求助

看起来你遇到的核心问题是点击返回按钮时，没有正确移除对应的show和hide类，这主要是事件冒泡干扰和DOM层级选择不准确导致的，咱们一步步来修复：

问题分析 #

先看你原来的代码：

$('.menu-item-has-children').click(function() { 
  $(this).find(".sub-menu").addClass('show'); 
  $(this).parent().addClass('hide'); 
}); 
$('.back').click(function() { 
  $(this).parent().removeClass('show'); 
  $(this).parent().parent().parent().removeClass('hide'); 
});

这里有两个关键问题：

1. 点击返回按钮时，事件会向上冒泡到.menu-item-has-children，触发父元素的点击事件，相当于刚移除类又被重新加上了
2. 多层parent()的层级判断太脆弱，如果DOM结构有一点调整就会失效，不如用更可靠的向上查找方法

修复后的代码 #

// 点击父菜单显示子菜单、隐藏主菜单容器
$('.menu-item-has-children').click(function(e) {
  // 只有点击的是主菜单本身（不是子菜单里的返回按钮）才触发逻辑
  if ($(e.target).closest('.back').length === 0) {
    $(this).find(".sub-menu").addClass('show');
    // 用closest找到最近的主菜单容器（替换成你实际的主菜单容器类名）
    $(this).closest('.main-menu-container').addClass('hide');
  }
});

// 点击返回按钮，隐藏子菜单、显示主菜单
$('.back').click(function(e) {
  // 阻止事件冒泡，避免触发父元素的点击事件
  e.stopPropagation();
  
  const $subMenu = $(this).closest(".sub-menu");
  $subMenu.removeClass('show');
  // 同样用closest找到主菜单容器
  $subMenu.closest('.main-menu-container').removeClass('hide');
});

关键优化点 #

• e.stopPropagation()：彻底阻止返回按钮的点击事件向上冒泡，避免和父菜单的点击逻辑冲突
• closest()替代多层parent()：closest()会向上查找最近的匹配元素，比硬写多层parent()更灵活，哪怕DOM结构微调也不会失效
• 父菜单点击的过滤判断：确保只有点击主菜单标题时才触发显示子菜单的逻辑，防止误操作

额外提示 #

请确保你的DOM结构和选择器匹配，比如常见的菜单结构应该是这样的：

<div class="main-menu-container">
  <ul>
    <li class="menu-item-has-children">
      主菜单选项
      <ul class="sub-menu">
        <li><a href="#" class="back">返回</a></li>
        <li>子菜单选项1</li>
        <li>子菜单选项2</li>
      </ul>
    </li>
  </ul>
</div>

如果你的主菜单容器类名不是main-menu-container，记得替换成你实际使用的类名。

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