为何使用closest()的jQuery选择器在此场景下失效？

嘿，我来帮你排查这个问题～ 你遇到的核心问题是对closest()方法的选择器使用有误，咱们一步步来理清楚：

为什么原来的代码不生效？ #

你写的$(this).closest("li.dropdown a")其实是在找当前元素的祖先中，同时满足是li.dropdown的后代且是<a>标签的元素，但点击子菜单的<a>时，它的祖先链里根本没有这样的元素——子菜单的<a>的父级是普通<li>，再往上是下拉菜单的<ul>，再才是带dropdown类的主菜单<li>，而主菜单的<a>是这个<li>的子元素，并不是当前点击元素的祖先，所以closest()找不到任何匹配项，自然加不上active类。

修正后的代码 #

咱们调整一下逻辑：先找到当前点击元素所属的主菜单容器（也就是最近的li.dropdown），再选中这个容器里的主菜单<a>标签：

$(document).ready(function(){
  $("li a").click(function(){
    // 移除所有已激活的高亮
    $("li a.active").removeClass("active");
    // 1. 找到当前点击元素最近的主菜单容器li.dropdown
    // 2. 选中这个容器下的直接子元素a（也就是主菜单链接）
    $(this).closest("li.dropdown").find("> a").addClass("active");
  });
});

代码解释 #

• closest("li.dropdown")：从当前点击的<a>开始向上遍历DOM树，精准定位到对应的主菜单容器（不管子菜单嵌套多少层都能找到）。
• .find("> a")：在找到的主菜单容器里，只选择它的直接子元素<a>，避免误选中可能存在的其他嵌套<a>（比如你代码里的二级子菜单）。
• 哪怕点击的是主菜单本身的<a>，这个逻辑也能正常工作——此时closest("li.dropdown")就是它的父级<li>，.find(">a")就是它自己，完美适配所有场景。

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