点击.submenu li a时修改.menu a背景色的jQuery实现求助

嘿，作为编程新手能自己动手写代码尝试功能，已经超棒啦！我看你现在的需求是点击.submenu li a时，给对应的.menu类下的a标签设置绿色背景，但代码里的选择器逻辑有点小问题，咱们来一步步修正它~

先理清楚问题所在 #

你原代码里的$(this).parent(".menu a")是错误的：parent()方法只会获取当前元素的直接父节点（也就是<li>），而.menu a是更高层级的祖先元素，所以这个选择器找不到目标元素，自然没法修改背景色。

修正后的代码（附详细解释） #

首先假设你的HTML结构大概是这样的（如果和你的实际结构略有不同，调整选择器即可）：

<ul>
  <li class="menu">
    <a href="#">主菜单1</a>
    <ul class="submenu">
      <li><a href="#">子菜单选项1</a></li>
      <li><a href="#">子菜单选项2</a></li>
    </ul>
  </li>
  <li class="menu">
    <a href="#">主菜单2</a>
    <ul class="submenu">
      <li><a href="#">子菜单选项3</a></li>
    </ul>
  </li>
</ul>

对应的JavaScript代码修改如下：

$(document).ready(function(){
  // 点击主菜单切换子菜单显示/隐藏
  $(".menu").click(function(){
    $(".submenu").hide();
    $(this).find(".submenu").show(); // 改用find()，兼容submenu不是直接子元素的情况
  });

  // 点击子菜单链接时的样式修改逻辑
  $(".submenu li a").click(function(e){
    e.preventDefault(); // 阻止链接默认跳转（如果你的链接不需要跳转可以保留，需要的话删掉）
    
    // 重置所有子菜单链接的颜色为蓝色
    $(".submenu li a").css("color","blue");
    // 将当前点击的子菜单链接设为红色
    $(this).css("color","red");

    // 找到当前子菜单对应的主菜单a标签，设置绿色背景
    const targetMenuLink = $(this).closest(".menu").find("a");
    targetMenuLink.css({"background": "green"});

    // 重置其他主菜单的背景色，避免多个主菜单同时变绿
    $(".menu a").not(targetMenuLink).css({"background": ""});
  });
});

关键修改点说明 #

1. 替换children()为find()：children()仅查找直接子元素，而find()会查找所有后代元素，适配更灵活的HTML嵌套结构。
2. 用closest()定位主菜单：$(this).closest(".menu")会向上遍历DOM树，找到最近的带有.menu类的祖先元素，再通过find("a")定位到主菜单的链接，这才是你要修改的目标元素。
3. 新增其他主菜单背景色重置：确保每次点击子菜单时，只有对应的主菜单显示绿色背景，其他主菜单恢复默认样式，体验更友好。
4. 阻止链接默认行为：如果子菜单的a标签带有真实的href，点击会触发页面跳转，加上e.preventDefault()可以先专注测试样式效果。

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