如何让JS仅作用于目标元素？解决批量元素类名切换异常问题

你的核心问题有两个：类选择器语法错误，以及未限定操作范围到当前点击的元素。以下是修正后的完整方案：

修正后的JavaScript代码 #

jQuery(document).ready(function($) {
  // 正确使用类选择器，添加.前缀
  $(".clickSlide").click(function() {
    // 仅操作当前点击元素内部的.sub_menu
    $(this).find(".sub_menu").toggleClass("open");
  });
});

关键修改说明 #

• 修复选择器语法：原代码中$("clickSlide")和$("sub_menu")缺少类选择器的.前缀，jQuery会将其当作HTML标签查找，正确写法应为$(".clickSlide")和$(".sub_menu")。
• 限定操作范围：$(this)指代当前被点击的.clickSlide元素，通过.find(".sub_menu")仅定位该元素内部的子菜单，避免影响页面上其他组的.sub_menu。
  • 若子菜单是.clickSlide的直接子元素，也可使用$(this).children(".sub_menu")，性能略优；.find()则适配更深层次的嵌套结构，适用范围更广。

效果验证 #

点击任意一个.clickSlide时，只有它对应的内部.sub_menu会切换open类名，其余组的子菜单不受影响。

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