jQuery子菜单切换触发全部子菜单同步状态问题求助

嘿，我来帮你搞定这个烦恼！你现在遇到的核心问题很明确：点击子菜单的触发链接时，你用了$(".submenu")这个选择器，它会选中页面上所有带有.submenu类的元素，所以才会导致所有子菜单一起展开/收起。咱们只需要调整选择逻辑，让代码只操作当前点击项对应的子菜单就行。

修改后的完整JS代码 #

$(document).ready(function() { 
  // 移动端汉堡菜单逻辑（这部分看起来没问题，保留）
  $(".toggle-btn").click(function() { 
    $(this).toggleClass("active"); 
    $(".parent-nav").toggleClass("in"); 
  }); 

  // 子菜单切换逻辑（核心修改在这里）
  $("#mainnav .child-nav > a").click(function(e) { 
    e.preventDefault(); // 用e.preventDefault()代替return false，更规范
    const $currentLink = $(this);
    $currentLink.toggleClass("active");
    
    // 只操作当前点击链接的兄弟元素里的.submenu
    // 如果你的submenu是a标签的下一个同级元素，也可以用$currentLink.next(".submenu")
    $currentLink.siblings(".submenu").toggleClass("in");

    // 可选：如果需要点击新的子菜单时，关闭其他已经展开的子菜单
    // $("#mainnav .child-nav > a").not($currentLink).removeClass("active");
    // $("#mainnav .submenu").not($currentLink.siblings(".submenu")).removeClass("in");
  }); 
}); 

改动说明 #

1. 选择器范围缩小：把全局的$(".submenu")改成$currentLink.siblings(".submenu")，这样只会找到当前点击的<a>元素的同级子菜单，不会影响其他菜单项。如果你的HTML结构里子菜单是<a>的直接下一个元素（比如<a>...</a><ul class="submenu">...</ul>），用$currentLink.next(".submenu")会更精准。
2. 事件处理优化：用e.preventDefault()代替return false，前者只会阻止默认跳转行为，后者会同时阻止事件冒泡，在复杂场景下更容易出问题，前者更规范。
3. 可选的互斥逻辑：我加了注释的那段代码，如果你希望同时只能展开一个子菜单，可以取消注释，实现点击一个子菜单时自动关闭其他已展开的。

补充说明 #

你的CSS代码看起来被截断了（最后一行是visibi...），如果后续还有样式显示的问题，比如子菜单默认隐藏、展开时的动画等，确保.submenu默认是隐藏状态（比如display: none;），而.submenu.in是显示状态（比如display: block;或者用visibility/opacity配合过渡动画）。

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