点击标签列表省略号打开全部隐藏标签而非当前组的问题如何解决

问题原因 #

原有代码使用全局类选择器匹配所有标签组与省略号元素，点击事件触发后会操作页面内所有符合匹配规则的元素，没有限定作用范围到当前点击的分组；同时外层的.each()遍历会导致同一个省略号元素被重复绑定多次点击事件，进一步加剧功能异常。

修复后的JS实现 #

// 直接绑定所有省略号的点击事件，无需外层each遍历
$('.seymour').click(function () {
  // 定位当前点击的省略号所属的标签组容器
  const $currentList = $(this).closest('.categories-list');
  // 仅展开当前组的隐藏标签
  $currentList.find('li:hidden').show();
  // 判断当前组标签是否全部展示，是则隐藏当前组的省略号
  if ($currentList.find('li').length === $currentList.find('li:visible').length) {
    $(this).hide();
  }
});

代码说明 #

• 通过closest('.categories-list')限定DOM操作的作用范围，只会处理当前点击的标签分组，不会影响其他分组的显示状态
• 移除了冗余的外层遍历逻辑，避免重复绑定点击事件带来的额外问题
• 原有CSS规则和HTML结构无需调整，可直接复用

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