答案：通过CSS的max-height与overflow:hidden配合transition实现折叠菜单动画，避免height:auto无法过渡的问题，利用JavaScript切换类控制状态，适用于导航、FAQ等场景，需注意max-height取值合理及溢出隐藏。
在CSS初级项目中，实现一个简单的折叠菜单可以通过
transition
和
max-height
配合来完成。这种方法不需要JavaScript控制高度动画（虽然JS可用于切换类），仅用CSS就能做出平滑的展开与收起效果。
原理说明：为什么用 max-height 而不是 height？
直接使用
height: 0
到
height: auto
无法触发CSS过渡动画，因为
不是一个具体数值，
浏览器
无法计算中间过程。而
max-height
可以设置一个足够大的值（如
到
），从而让 transition 生效。
关键点：
初始状态：max-height 设为 0，隐藏内容
展开状态：max-height 设为一个合理的大值（覆盖所有内容）
配合
overflow
: hidden，确保超出部分不可见
添加 transition 实现动画效果
HTML 结构示例
一个简单的按钮 + 内容区域结构：
立即学习
“
前端免费学习笔记（深入）
”；
CSS 样式实现
核心样式如下：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
这里利用了父元素
是否有
类来控制子元素的显示状态。
用 JavaScript 切换状态（可选）
添加简单脚本实现点击切换：
点击按钮时，给外层 div 切换
类，从而触发动画。
优化建议
根据实际内容调整
值，太大可能动画时间过长，太小会截断内容
可结合
或
增强视觉效果
移动端注意兼容性，大部分现代浏览器都支持这些属性
基本上就这些。不复杂但容易忽略细节，比如忘记
就会导致内容溢出可见。掌握这个技巧后，你可以轻松在导航、FAQ、下拉面板等场景中使用。
auto0500px.menu-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.menu-item.active .menu-content {
max-height: 500px; / 足够容纳内容的高度 /
transition: max-height 0.3s ease;
}
.menu-itemactivedocument.querySelector('.menu-toggle').addEventListener('click', function() {
document.querySelector('.menu-item').classList.toggle('active');
});activemax-heightopacitytransformoverflow: hidden