JavaScript实现父元素点击切换子元素显隐及联动隐藏其他子元素

现有点击处理流程缺少对目标子元素的状态判断，每次触发点击都会无条件将所有子元素重置为隐藏状态，再强制给当前关联子元素添加show类，完全无法识别“已展开的元素被再次点击”的场景，因此实现不了二次点击收起的效果。

• 原代码中通过事件回调内的this获取被点击父元素、读取data属性定位关联子元素的逻辑完全可用，不需要额外调整
• 新增判断逻辑：在拿到对应关联子元素the_element后，先通过classList.contains('show')校验该元素当前是否处于展开状态
• 分支处理规则：
• 若目标子元素已经带有show类（处于展开态）：直接移除show类、补回hide类完成收起，不需要执行全量重置操作——因为正常状态下同一时间只会有一个子元素处于展开态，其他子元素本来就已经是隐藏状态
• 若目标子元素没有show类（处于收起态）：保留原有全量隐藏所有子元素的逻辑，再给当前目标子元素添加show类完成展开

<!-- 原有HTML结构保持不变 -->
<div class="parent" data="one">
  <div class="child hide" id="one">
    test
  </div>
</div>

<div class="parent" data="two">
  <div class="child hide" id='two'>
    test 2
  </div>
</div>

<script>
var parent = document.getElementsByClassName("parent");
for (var i = 0; i < parent.length; i++) {
  parent[i].addEventListener("click", function () {
    var child = document.getElementsByClassName("child");
    var attribute = this.getAttribute("data");
    var the_element = document.getElementById(attribute);

    // 判断目标元素的当前展示状态
    if (the_element.classList.contains('show')) {
      // 已展开时点击：切换为收起
      the_element.classList.remove('show');
      the_element.classList.add('hide');
    } else {
      // 未展开时点击：重置所有元素为隐藏，再展开当前目标
      for (var is = 0; is < child.length; is++) {
        child[is].classList.add('hide');
        child[is].classList.remove('show');
      }
      the_element.classList.add('show');
    }
  });
}
</script>

补充说明：上述逻辑没有引入额外的全局状态标记，直接用类名作为状态判断依据，和原有代码的适配性最高，不会产生冗余的状态同步问题。

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