嵌套Collapsible div无法向下推送内容的问题求助

问题本质 #

当前折叠逻辑仅在父面板（Header 2）首次展开时，一次性读取其scrollHeight设置固定高度，但子面板展开/折叠会改变父容器的实际内容高度，这个动态变化未被监听同步，导致父面板高度无法更新，子面板展开时推不动下方的Header 3。

修复方案 #

方案1：子面板触发时同步更新父容器高度

在子Header的点击事件中，主动定位父级折叠容器，若父容器处于展开状态，重新计算并设置其scrollHeight，确保父容器高度始终能容纳所有展开的子内容。

修改后的JS代码：

// 父面板点击逻辑
document.querySelectorAll('.header').forEach(header => {
  header.addEventListener('click', () => {
    const target = document.getElementById(header.dataset.target);
    target.classList.toggle('expanded');
    target.style.height = target.classList.contains('expanded') 
      ? target.scrollHeight + 'px' 
      : '0';
  });
});

// 子面板点击逻辑，增加父容器高度同步
document.querySelectorAll('.sub-header').forEach(subHeader => {
  subHeader.addEventListener('click', () => {
    const target = document.getElementById(subHeader.dataset.target);
    target.classList.toggle('expanded');
    target.style.height = target.classList.contains('expanded') 
      ? target.scrollHeight + 'px' 
      : '0';

    // 找到父级折叠容器并更新高度
    const parentContent = target.closest('.content');
    if (parentContent && parentContent.classList.contains('expanded')) {
      parentContent.style.height = parentContent.scrollHeight + 'px';
    }
  });
});

方案2：改用CSS maxHeight实现自动适配（更简洁）

放弃手动计算scrollHeight的方式，用CSS的maxHeight配合过渡动画，让容器自动根据内容高度展开/收缩，从根源避免高度计算滞后问题。

CSS代码：

.content, .sub-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}

.content.expanded, .sub-content.expanded {
  /* 设置远大于内容最大可能高度的值，确保完全展开 */
  max-height: 2000px;
}

JS代码（只需切换类名，无需计算高度）：

document.querySelectorAll('.header, .sub-header').forEach(trigger => {
  trigger.addEventListener('click', () => {
    const target = document.getElementById(trigger.dataset.target);
    target.classList.toggle('expanded');
  });
});

方案对比 #

• 方案1：适合需要精确控制容器高度的场景，兼容性强，但需额外处理父容器高度同步。
• 方案2：代码简洁、维护成本低，依赖CSS过渡效果，只要maxHeight设置合理，就能完美适配内容动态变化。

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