如何使用jQuery toggleClass仅控制对应侧边导航的指定links元素

问题核心是你当前的jQuery代码使用了全局选择器$('.links')，点击时会匹配页面中所有的.links元素，导致全部展开/收起。要实现仅操作当前标题对应的容器，需要基于点击的link-section-title元素，定位到其所属的link-section下的.links元素。

修正后的jQuery代码： #

$('.link-section-title').click(function() {
  // 先找到当前点击标题所在的父级link-section，再查找里面的.links元素
  $(this).closest('.link-section').find('.links').toggleClass('open');
});

代码说明： #

• $(this)：指代当前被点击的link-section-title元素，确保操作的是触发事件的那个标题。
• .closest('.link-section')：从当前元素向上遍历DOM树，找到最近的.link-section父容器，确保我们只在当前这个分组里操作。
• .find('.links')：在找到的link-section容器内，定位到对应的.links元素，避免影响其他分组。
• .toggleClass('open')：给这个特定的.links元素切换open类，实现展开/收起。

另一种简化写法（结构固定时可用）： #

如果你的DOM结构固定（link-section-title和.links始终在同一个link-section下，且.links是标题的同级元素），也可以用siblings方法：

$('.link-section-title').click(function() {
  $(this).siblings('.links').toggleClass('open');
});

不过.closest的写法更健壮，后续如果link-section内部结构调整（比如中间新增元素），依然能正确定位目标。

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