jQuery点击事件选中同class所有元素，如何仅定位点击元素？

你的问题根源在于用了全局类选择器，每次点击都会选中页面上所有带.toggle-title的元素，所以所有手风琴项都会一起变化。不用改类名，只需要用$(this)锁定当前被点击的元素，再基于它去操作对应的子元素就行，具体修改方案如下：

修正后的完整代码 #

// 给所有.toggle-title绑定点击事件
$(".toggle .toggle-title").on("click", function() {
  // 获取当前被点击的标题元素（关键！只操作这一个）
  const $currentTitle = $(this);
  
  // 切换当前标题的active类（替代手动判断添加/移除）
  $currentTitle.toggleClass("active");
  
  // 定位当前手风琴项内的描述文本和PDF元素
  const $currentToggle = $currentTitle.closest(".toggle");
  const $description = $currentToggle.find(".toggle-inner");
  const $pdf = $currentToggle.find(".toggle-pdf"); // 假设你的PDF元素类是toggle-pdf

  // 根据active状态控制显示/隐藏
  if ($currentTitle.hasClass("active")) {
    $description.hide(); // 隐藏描述文本
    $pdf.show();         // 显示PDF
  } else {
    $description.show(); // 显示描述文本
    $pdf.hide();         // 隐藏PDF
  }
});

核心逻辑解释 #

• $(this)：在点击事件内部，它就是当前被用户点击的那个.toggle-title元素，用它替代全局选择器，就能精准定位到触发事件的手风琴项。
• closest(".toggle")：向上查找最近的父级.toggle容器，把操作范围限制在当前手风琴项内，不会影响其他项。
• toggleClass("active")：简化类名的切换逻辑，不用手动写hasClass再addClass/removeClass，一步完成状态切换。

如果你的PDF元素类名不是.toggle-pdf，只需要把代码里的对应类名改成你实际用的就行，核心思路不变。

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