求助：使用max-height实现响应式汉堡下拉菜单平滑动画

Hey! 我猜你用max-height方法没成功大概率是CSS的关键属性没配置对，我给你梳理下核心要点，再贴一套可直接运行的代码，你对照着改就行～

核心原理回顾 #

用max-height实现平滑过渡的关键是：

• 默认状态下给菜单设置max-height: 0 + overflow: hidden，让菜单完全隐藏
• 给菜单加上transition: max-height 0.3s ease（时长和缓动函数可以自己调整）
• 点击汉堡按钮时，给菜单添加一个类（比如.active），这个类把max-height设为一个远大于菜单实际高度的值（比如500px，只要能覆盖所有菜单项展开后的高度就行）

你可能踩的坑 #

• 忘记加overflow: hidden：没有这个属性的话，菜单内容会从max-height:0的容器里漏出来，看不到隐藏效果
• transition没绑定在max-height上：如果把transition加在display属性上是没用的，因为display是瞬间切换的，不支持过渡
• 默认状态的max-height不是0：比如菜单本身有默认的height或者min-height，会导致过渡失效
• .active的max-height太小：如果设置的数值比菜单实际展开高度还小，菜单会被截断，过渡效果也不完整

完整代码示例 #

HTML

<header>
  <button class="hamburger">☰</button>
  <nav>
    <ul class="menu">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

CSS

/* 基础样式，根据你的需求调整 */
.hamburger {
  font-size: 24px;
  border: none;
  background: none;
  cursor: pointer;
}

nav .menu {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  /* 关键过渡设置 */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* 可选：菜单展开后的样式 */
  background: #f5f5f5;
}

nav .menu li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

/* 激活状态的菜单 */
nav .menu.active {
  /* 设置一个足够大的max-height，确保能容纳所有菜单项 */
  max-height: 500px;
}

JS

document.querySelector('.hamburger').addEventListener("click", function() {
  // 获取菜单元素，切换active类
  const menu = document.querySelector('nav ul.menu');
  menu.classList.toggle('active');
});

你可以把上面的代码和你自己的代码对比，看看哪个环节没做到位～另外，如果菜单高度不确定，也可以用JS动态计算菜单的scrollHeight，然后把max-height设为这个值，这样更精准，但上面的固定值方案已经能覆盖绝大多数场景啦。

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