嵌套Collapsible组件可视区域计算异常问题求助

问题现象 #

展开嵌套的collapsible组件时，父元素可视高度计算错误，部分嵌套内容被屏幕截断，且无法实现嵌套组件独立展开/折叠时父容器高度自动适配的需求。

问题根源 #

1. 强制批量操作嵌套组件：点击父collapsible时，代码会强制处理所有嵌套组件的展开/折叠，而非允许用户独立操作单个嵌套组件
2. 高度计算逻辑错误：直接基于父容器当前的maxHeight做加减，忽略了嵌套组件自身的状态变化，也未考虑父容器自身内容的动态高度
3. 父容器未感知子组件变化：嵌套组件独立操作时，父容器无法自动更新高度，导致内容截断

修复方案 #

核心思路 #

• 让所有collapsible（包括嵌套的）拥有独立的点击事件，支持单独展开/折叠
• 子组件状态变化时，向上递归更新所有父级容器的高度，确保父容器适配子内容的高度变化
• 移除原代码中点击父组件时强制操作嵌套组件的逻辑

修复后的代码 #

JavaScript代码

// 获取所有 collapsible 按钮
const collapsibles = document.querySelectorAll('.collapsible');

// 为每个 collapsible 添加独立点击事件
collapsibles.forEach(button => {
  button.addEventListener('click', function() {
    this.classList.toggle('active');
    const content = this.nextElementSibling;
    
    // 切换当前内容的展开/折叠状态
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + 'px';
    }
    
    // 向上更新所有父级 collapsible 容器的高度
    updateParentCollapsibleHeight(this);
  });
});

// 递归更新父级 collapsible 容器的高度
function updateParentCollapsibleHeight(element) {
  const parentContent = element.closest('.ContributionContent');
  if (!parentContent) return;
  
  const parentButton = parentContent.previousElementSibling;
  if (parentButton && parentButton.classList.contains('collapsible')) {
    // 重新计算父容器的总高度：累加所有子元素的实际高度
    let totalHeight = 0;
    parentContent.childNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        totalHeight += node.offsetHeight;
      }
    });
    
    parentContent.style.maxHeight = totalHeight + 'px';
    // 继续向上更新更高层级的父容器
    updateParentCollapsibleHeight(parentButton);
  }
}

CSS代码（补充折叠基础样式）

.active {
  color: blue;
}

/* 为折叠内容添加基础样式，确保高度计算准确且过渡平滑 */
.ContributionContent {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

HTML结构（保持原有结构不变）

<div id="HotLikeMiami">
  <div class="HLM">
    <div class="HLMRow">

      <div class="HLMTitle">
        <h1 class="sub-title">Fantastic League</h1>
      </div>
      <div class="HLMImg">
        <img src="fantasticLeague.png">
      </div>
      <div class="HLMDetails">
        <p>A 2D Top Down Shooter game which heavily focuses on Enemy AI. I have made an attempt to build this project from ground up. I have used SFML for rendering shapes and textures, the rest is made from scratch. The project involves the integration
          of complex enemy AI. A simple Data-Oriented Design approach has been followed in this project for handling different events and messages by the enemies. </p>
      </div>

      <div class="MyContibution">
        <button class="collapsible">My Contribution</button>
        <div class="ContributionContent">
          <p>Got a lot of contribution</p>
          <button class="collapsible nested-collapsible">My Contribution</button>
          <div class="ContributionContent">
            <p>1. This process involves the development and integration of states like Game Menu, Splash Screen, InGame, Game Over etc states. These states are fetched with delta time which is calculated from the Game Loop. ​ 2. This stage also includes
              the development of Asset Manager, Input Manager etc</p>
          </div>

          <button class="collapsible nested-collapsible">My Contribution</button>
          <div class="ContributionContent">
            <p>1. This process involves the development and integration of states like Game Menu, Splash Screen, InGame, Game Over etc states. These states are fetched with delta time which is calculated from the Game Loop. ​ 2. This stage also includes
              the development of Asset Manager, Input Manager etc</p>
          </div>

          <button class="collapsible nested-collapsible">My Contribution</button>
          <div class="ContributionContent">
            <p>1. This process involves the development and integration of states like Game Menu, Splash Screen, InGame, Game Over etc states. These states are fetched with delta time which is calculated from the Game Loop. ​ 2. This stage also includes
              the development of Asset Manager, Input Manager etc</p>
          </div>

        </div>
      </div>


    </div>

  </div>
</div>

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