JavaScript实现点击仅显单个答案：移除未点击兄弟div及类属性

我懂你现在的需求：点击某个h2后，要把所有未被点击的h2及其兄弟div的class属性全部移除。下面直接给你可行的代码方案，再一步步解释逻辑：

var toggle = function() {
  var h2 = this; // 当前被点击的h2标签
  var div = h2.nextElementSibling; // 当前h2对应的兄弟div

  // 先保留你原本处理当前点击元素的逻辑（比如展开/收起的toggle）
  h2.classList.toggle('active');
  div.classList.toggle('active');

  // remove all other answers
  var allH2s = document.querySelectorAll('h2'); // 获取页面上所有h2元素
  for (var i = 0; i < allH2s.length; i++) {
    var currentH2 = allH2s[i];
    // 判断当前遍历的h2是不是被点击的那一个
    if (currentH2 !== h2) {
      currentH2.classList.remove('active'); // 移除未点击h2的class
      var siblingDiv = currentH2.nextElementSibling;
      // 做个安全判断，确保兄弟元素是div才操作，避免报错
      if (siblingDiv && siblingDiv.tagName === 'DIV') {
        siblingDiv.classList.remove('active'); // 移除对应兄弟div的class
      }
    }
  }
};

// 别忘了给所有h2绑定点击事件
document.querySelectorAll('h2').forEach(function(h2Item) {
  h2Item.addEventListener('click', toggle);
});

关键逻辑说明： #

• 获取全部h2：用document.querySelectorAll('h2')拿到页面上所有h2节点集合，这样才能遍历每一个元素做判断。
• 遍历区分点击项：在for循环里，把每个遍历到的currentH2和被点击的h2做对比——不是同一个的话，就执行移除class的操作。
• 安全处理兄弟元素：加了if (siblingDiv && siblingDiv.tagName === 'DIV')的判断，避免遇到h2后面没有div、或者兄弟元素不是div的情况，防止控制台报错。
• 绑定事件：最后必须给所有h2绑定toggle点击事件，这样每个h2被点击时都会触发这套逻辑。

如果你的原有代码已经有处理当前点击元素的逻辑（比如切换展开/收起的class），只需要把//remove all other answers下方的代码替换成上面的循环部分即可。

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