JS点击展开div时无法正确定位对应子元素的问题求解

• 违反HTML基础规范：id属性要求在全页面唯一，你给多个父级容器、子级详情容器都设置了相同id，document.getElementById("team_details")永远只会匹配页面中第一个出现的对应元素，这就是点击任意容器都只展开第一个子块的核心原因。
• 事件绑定逻辑存在重复执行问题：你在HTML标签上写了内联onclick="unwrapEventContainer()"，每次点击容器都会触发一次该函数，函数内部又会循环给所有.event_container重复绑定click监听器，点击次数越多绑定的监听器越多，不仅浪费内存，还会导致状态反复切换出现异常。
• 硬编码高度判断、直接操作内联样式的写法可维护性极差，只要内容长度、设计样式调整，原有判断逻辑就会直接失效。

1. 调整HTML结构 #

删除所有重复的id属性，子级详情块不需要id，通过DOM层级关系就能定位；同时移除标签上的内联onclick绑定，从源头避免重复绑定事件。参考结构：

<div class="event_wrapper">
  <div class="event_container">
    <p style = "display: inline-block; color: #000000; font-size: 14px;">Name of the event</p>
    <hr style="width: 90%">
    <div class="team_details" style="display: none;">
      <button class="btn_select_large">Create Team</button>
      <button class="btn_select_large">Singleplayer</button>
      <br>
      <div style="padding-top: 3px;">
        <div class="team_container">
          <p style="display: inline-block; font-size: 13px;">Team Name</p>
          <button class="btn_join_small">Join &gt;</button>
        </div>
      </div>
      <div style="padding-top: 3px;">
        <div class="team_container">
          <p style="display: inline-block; font-size: 13px;">Team Name</p>
          <button class="btn_join_small">Join &gt;</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 其余event_container结构和上面保持一致即可，不要加重复id -->
  <div class="event_container">
    <!-- 同上结构 -->
  </div>
</div>

2. 用CSS类控制交互状态 #

不要在JS里硬编码高度、display属性值，把展开状态的样式统一放到CSS中管理，还可以顺手加上平滑过渡效果：

.event_wrapper{
  width: 90%;
  text-align: center;
  display: block;
  margin: auto;
}

.event_container{
  background-color: #CCCCCC;
  border-radius: 15px;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  height: 70px;
  width: 100%;
  overflow: hidden; /* 隐藏超出容器高度的内容 */
  transition: height 0.2s ease; /* 可选：添加展开收起的平滑动画 */
}
/* 展开状态样式 */
.event_container.active{
  height: 230px;
}
.event_container.active .team_details{
  display: inline-block;
}

.team_container{
  background-color: #EEEEEE;
  color: #000000;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  width: 100%;
  display: block;
}
.team_details{
  display: none;
}

3. 优化JS逻辑 #

只在页面DOM加载完成后绑定一次事件，点击时通过当前触发事件的容器（this）查找内部对应的详情块，不会出现定位错误；容器数量多的场景可以用事件委托进一步提升性能。

// 等DOM加载完成后再执行绑定
document.addEventListener('DOMContentLoaded', function() {
  const eventContainers = document.querySelectorAll('.event_container');
  // 给每个容器只绑定一次点击事件
  eventContainers.forEach(container => {
    container.addEventListener('click', function() {
      // 直接查找当前点击容器内部的详情块，不会匹配到其他容器的内容
      this.classList.toggle('active');
    })
  })

  // --- 高性能版：事件委托，适合容器数量多、或者后续会动态新增容器的场景，仅需绑定一次事件
  /*
  document.querySelector('.event_wrapper').addEventListener('click', function(e) {
    const currentContainer = e.target.closest('.event_container');
    if(!currentContainer) return;
    currentContainer.classList.toggle('active');
  })
  */
})

• 移除重复id，通过DOM父子关系定位子元素，彻底解决元素定位错误的问题
• 事件仅绑定一次，不会出现重复绑定导致的异常，内存占用更低
• 实现样式与逻辑分离，JS只负责切换状态类，所有样式规则统一在CSS中维护，后续调整样式不需要修改JS代码，可维护性更高
• 事件委托方案支持动态新增的容器，不需要重复绑定事件，大列表场景下性能提升明显
• 新增overflow:hidden属性和过渡动画，交互更流畅，也不会出现内容溢出容器的问题

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