嵌套手风琴父元素max-height更新异常问题求解

问题背景 #

构建嵌套手风琴结构时，点击子手风琴展开/收起时，父元素的max-height计算经常出现偏差，导致内容被截断（比如预期高度约288px，实际仅160px）。所有手风琴均配置了transition: max-height 0.3s ease; overflow: hidden;。

当前使用的点击事件处理逻辑如下：点击.aside-accordion按钮时，先设置当前手风琴的max-height，再通过循环更新所有父级.accordion-content的高度：

document.addEventListener('click', function(event) {
  if (event.target.matches('.aside-accordion')) {
    const button = event.target;
    const accordionMenu = button.nextElementSibling;
    const buttonArrow = button.querySelector('.arrow');

    button.classList.toggle('active');

    if (button.classList.contains('active')) {
      buttonArrow.classList.add('rotate-180');
      accordionMenu.style.maxHeight = accordionMenu.scrollHeight + 'px';
    } else {
      buttonArrow.classList.remove('rotate-180');
      accordionMenu.style.maxHeight = 0;
    }

    let parentContent = accordionMenu.parentElement.closest('.accordion-content');
    while (parentContent) {
      const parentButton = parentContent.previousElementSibling;
      if (parentButton && parentButton.classList.contains('active')) {
        // 尝试设置父元素实际高度
        parentContent.style.maxHeight = parentContent.scrollHeight + 'px';
      }
      parentContent = parentContent.parentElement.closest('.accordion-content');
    }
  }
});

已尝试但效果不佳的方案：

• 硬编码大值替代scrollHeight：有效但不够优雅
• 使用requestAnimationFrame或短延时setTimeout：效果不稳定
• 监听transitionend事件：初始打开内容会出现跳动

解决方案 #

问题根源在于DOM渲染延迟：设置子手风琴max-height后，浏览器尚未完成DOM布局更新，此时读取父元素scrollHeight仍为旧值。需确保DOM布局更新完成后再计算父元素高度，同时避免过渡动画干扰计算。

方案1：结合requestAnimationFrame与临时高度重置 #

强制浏览器先完成当前DOM更新，再计算真实高度：

document.addEventListener('click', function(event) {
  if (event.target.matches('.aside-accordion')) {
    const button = event.target;
    const accordionMenu = button.nextElementSibling;
    const buttonArrow = button.querySelector('.arrow');

    const isActive = button.classList.toggle('active');

    if (isActive) {
      buttonArrow.classList.add('rotate-180');
      // 先设为auto获取真实高度，再设回scrollHeight避免过渡跳变
      accordionMenu.style.maxHeight = 'auto';
      const realHeight = accordionMenu.scrollHeight;
      accordionMenu.style.maxHeight = realHeight + 'px';
    } else {
      buttonArrow.classList.remove('rotate-180');
      accordionMenu.style.maxHeight = 0;
    }

    // 等待DOM更新完成后处理父元素
    requestAnimationFrame(() => {
      let parentContent = accordionMenu.parentElement.closest('.accordion-content');
      while (parentContent) {
        const parentButton = parentContent.previousElementSibling;
        if (parentButton && parentButton.classList.contains('active')) {
          // 同样先重置为auto获取真实高度
          parentContent.style.maxHeight = 'auto';
          const parentRealHeight = parentContent.scrollHeight;
          parentContent.style.maxHeight = parentRealHeight + 'px';
        }
        parentContent = parentContent.parentElement.closest('.accordion-content');
      }
    });
  }
});

核心逻辑：

• 临时将手风琴max-height设为auto，确保获取到真实的scrollHeight后再设置回具体数值，避免过渡动画干扰
• 用requestAnimationFrame延迟父元素高度计算，保证子元素DOM布局已更新

方案2：临时禁用父元素过渡动画 #

若方案1仍有问题，可临时关闭父元素过渡动画，计算完成后恢复：

document.addEventListener('click', function(event) {
  if (event.target.matches('.aside-accordion')) {
    const button = event.target;
    const accordionMenu = button.nextElementSibling;
    const buttonArrow = button.querySelector('.arrow');

    const isActive = button.classList.toggle('active');

    if (isActive) {
      buttonArrow.classList.add('rotate-180');
      accordionMenu.style.maxHeight = accordionMenu.scrollHeight + 'px';
    } else {
      buttonArrow.classList.remove('rotate-180');
      accordionMenu.style.maxHeight = 0;
    }

    requestAnimationFrame(() => {
      let parentContent = accordionMenu.parentElement.closest('.accordion-content');
      while (parentContent) {
        const parentButton = parentContent.previousElementSibling;
        if (parentButton && parentButton.classList.contains('active')) {
          // 临时禁用过渡
          parentContent.style.transition = 'none';
          // 强制浏览器立即重排
          void parentContent.offsetHeight;
          // 设置真实高度
          parentContent.style.maxHeight = parentContent.scrollHeight + 'px';
          // 恢复过渡动画
          requestAnimationFrame(() => {
            parentContent.style.transition = '';
          });
        }
        parentContent = parentContent.parentElement.closest('.accordion-content');
      }
    });
  }
});

核心逻辑：

• 临时移除父元素过渡动画，避免计算过程中动画影响高度读取
• void parentContent.offsetHeight强制浏览器立即重排，确保scrollHeight为最新值
• 恢复过渡动画，保证后续展开/收起仍有平滑效果

关键原理 #

• scrollHeight的取值依赖当前DOM渲染状态，必须等待子元素高度更新完成后才能获取正确值
• requestAnimationFrame会在浏览器下一次重绘前执行，此时DOM布局已完成更新
• 临时禁用过渡或重置为auto，可避免过渡动画导致的高度计算偏差

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