如何让jQuery仅在当前hover的.dropdown元素内切换down和up类？

嘿，这个问题其实很容易搞定！你已经找对了方向——把操作范围限定在当前触发事件的元素内，只需要稍微调整一下选择器，就能让.down和.up的切换只在当前hover的dropdown内部生效啦。

修改后的代码方案 #

这里有两种等价的写法，都能实现你的需求：

写法1：使用find()方法

$(".dropdown").hover(function () {
  // 仅在当前触发hover的dropdown元素内部查找目标类
  $(this).find(".down, .up").toggleClass("down up");
});

写法2：使用jQuery选择器的上下文参数

$(".dropdown").hover(function () {
  // 第二个参数this指定查找范围为当前dropdown元素
  $(".down, .up", this).toggleClass("down up");
});

原理说明 #

• 回调函数里的this，指代的正是当前触发hover动作的那个.dropdown元素，而不是页面上所有的.dropdown。
• 不管是$(this).find(...)还是$(selector, this)，都是把元素查找的范围严格限定在当前dropdown的内部后代中，彻底避免了误操作其他dropdown里的.down和.up元素。
• toggleClass("down up")会让匹配元素在两个类之间切换：有down类就换成up，有up类就换成down，完美契合你的切换需求。

这样修改后，每次hover某个dropdown时，只会对它自己内部的目标元素做类切换，不会影响其他同类型元素啦！

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