如何让基于max-height的动画下拉菜单自动适配内容高度？

针对你遇到的固定max-height值导致内容截断、动画时长不合理的问题，这里提供几种实用方案：

方案一：JavaScript计算真实内容高度 #

通过JS获取元素的scrollHeight（内容实际高度），动态设置max-height值，让动画完全匹配内容高度：

实现代码 #

.faq-content {
  transition: max-height 0.3s ease-in-out;
  overflow: hidden;
  max-height: 0; /* 默认收起状态 */
}

// 假设触发元素是.faq-toggle
document.querySelectorAll('.faq-toggle').forEach(toggle => {
  toggle.addEventListener('click', () => {
    const content = toggle.nextElementSibling;
    content.classList.toggle('dropdown-on');
    
    if (content.classList.contains('dropdown-on')) {
      // 展开时设置为内容真实高度
      content.style.maxHeight = content.scrollHeight + 'px';
    } else {
      // 收起时先锁定当前高度，再过渡到0
      content.style.maxHeight = content.scrollHeight + 'px';
      setTimeout(() => {
        content.style.maxHeight = '0';
      }, 10);
    }
  });
});

特点：完全适配任意内容高度，动画时长精准；仅需少量JS代码，兼容性好。 #

方案二：CSS Grid纯CSS实现 #

利用CSS Grid的grid-template-rows可过渡到auto的特性，无需JS即可实现自适应高度动画：

实现代码 #

.faq-content {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-content.dropdown-on {
  grid-template-rows: 1fr;
}

/* 必须给内容包裹一层，让子元素占满grid空间 */
.faq-content .faq-inner {
  min-height: 0;
}

特点：纯CSS实现无JS依赖；需要额外内层容器，现代浏览器均支持。 #

方案三：CSS变量配合预计算高度 #

如果偏好max-height写法，可通过CSS变量存储预计算的内容高度：

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

.faq-content.dropdown-on {
  max-height: var(--content-height);
}

// 页面加载时预计算所有内容高度
document.querySelectorAll('.faq-content').forEach(content => {
  content.style.setProperty('--content-height', content.scrollHeight + 'px');
});

特点：提前计算高度避免展开闪烁，保留max-height的过渡逻辑。 #

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