为何jQuery toggleClass()仅对偶数兄弟元素生效？

看起来你遇到的核心问题是没有精准定位到当前点击图标对应的评论区元素，导致toggleClass()的作用范围出错，出现仅偶数兄弟生效的情况。咱们一步步来解决：

问题根源分析 #

从你给出的DOM结构来看：

<div class="post_info">
  <div class="col">
    <i class="post_comments">icon</i>
  </div>
</div>
<div class="comments_body">
  <ul>
    <li>Many comments.</li>
  </ul>
</div>

.post_comments 和 .comments_body 并不是直接的兄弟关系——.comments_body 是 .post_comments 的祖父元素 .post_info 的下一个相邻兄弟。如果之前的代码没有基于当前点击的图标去查找对应的评论区，而是全局选择所有.comments_body，就会出现操作混乱的情况。

正确的jQuery实现代码 #

用以下代码替换你之前的逻辑，它会精准定位到当前点击图标对应的评论区：

$(document).on('click', '.post_comments', function() {
  // 向上找到当前图标所属的.post_info容器
  const currentPostInfo = $(this).closest('.post_info');
  // 找到这个容器的下一个兄弟元素——就是对应的评论区
  const targetComments = currentPostInfo.next('.comments_body');
  // 切换显示/隐藏类
  targetComments.toggleClass('active');
});

代码解释 #

• $(this).closest('.post_info')：从当前点击的图标元素向上遍历，找到最近的.post_info父容器，确保我们只针对当前帖子的区块操作。
• currentPostInfo.next('.comments_body')：定位到这个帖子容器的下一个兄弟元素（也就是对应的评论区），避免误操作其他帖子的评论区。
• toggleClass('active')：给目标评论区切换active类，配合你的CSS实现显示/隐藏。

验证CSS代码 #

你的CSS基础逻辑没问题，建议给.active加上前缀避免冲突：

.comments_body {
  display: none;
}
.comments_body.active {
  display: block;
}

如果你的页面是Rails循环渲染的多个帖子，这种方式会完美适配每个帖子的独立评论区切换，不会再出现“仅偶数元素生效”的问题啦。

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