答案：通过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过渡动画，因为 auto 不是一个具体数值，浏览器无法计算中间过程。而 max-height 可以设置一个足够大的值（如 0 到 500px），从而让 transition 生效。
关键点：
- 初始状态：max-height 设为 0，隐藏内容
- 展开状态：max-height 设为一个合理的大值（覆盖所有内容）
- 配合 overflow: hidden，确保超出部分不可见
- 添加 transition 实现动画效果
HTML 结构示例
一个简单的按钮 + 内容区域结构：
立即学习“前端免费学习笔记（深入）”；
<div class="menu-item">
<button class="menu-toggle">点击展开菜单</button>
<div class="menu-content">
<p>这里是折叠菜单中的内容</p>
<p>可以是链接、列表或其他元素</p>
</div>
</div>CSS 样式实现
核心样式如下：
.menu-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
<p>.menu-item.active .menu-content {
max-height: 500px; /<em> 足够容纳内容的高度 </em>/
transition: max-height 0.3s ease;
}这里利用了父元素 .menu-item 是否有 active 类来控制子元素的显示状态。
用 JavaScript 切换状态（可选）
添加简单脚本实现点击切换：
document.querySelector('.menu-toggle').addEventListener('click', function() {
document.querySelector('.menu-item').classList.toggle('active');
});点击按钮时，给外层 div 切换 active 类，从而触发动画。
优化建议
- 根据实际内容调整
max-height值，太大可能动画时间过长，太小会截断内容 - 可结合
opacity或transform增强视觉效果 - 移动端注意兼容性，大部分现代浏览器都支持这些属性
基本上就这些。不复杂但容易忽略细节，比如忘记 overflow: hidden 就会导致内容溢出可见。掌握这个技巧后，你可以轻松在导航、FAQ、下拉面板等场景中使用。
