如何使用jQuery移除除点击分组外的active类并实现类的添加/移除

嘿，我看了你现有的代码，发现逻辑上有点小问题，咱们来调整一下就能实现你想要的功能啦～

需求回顾 #

点击.icon元素时：

• 给对应的.content添加/移除active类
• 同时移除所有其他.content的active类，保证只有当前点击分组的active类被保留

修正后的jQuery代码 #

$(".icon").click(function () {
  // 第一步：先移除所有.content的active类，确保全局只有目标元素可能有该类
  $(".content").removeClass("active");
  // 第二步：切换当前点击的icon对应的content的active类
  $(this).next(".content").toggleClass("active");
});

代码解释 #

1. 先全局清除active类：$(".content").removeClass("active")会把页面上所有.content元素的active类都去掉，这一步确保不会有多个元素同时带有active类。
2. 切换当前目标的active类：$(this).next(".content")精准找到当前点击的.icon紧邻的下一个.content元素，然后用toggleClass("active")实现“有则移除，无则添加”的效果。

测试场景验证 #

• 第一次点击某个.icon：对应的.content会加上active类，其他.content都没有
• 再次点击同一个.icon：对应的.content的active类会被移除，所有.content都无active类
• 点击另一个.icon：之前的.content的active类被移除，新点击的对应的.content加上active类

这样就完美实现了你想要的交互效果啦～

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