答案是使用复选框与CSS的:checked伪类控制菜单展开。通过HTML结构结合隐藏复选框和label标签模拟按钮，利用max-height过渡实现内容区域的显示与隐藏，添加箭头图标增强交互提示，支持动画效果且无需JavaScript。
在CSS中制作折叠菜单，主要通过隐藏和显示内容区域来实现展开与收起效果。可以结合HTML结构、CSS样式以及少量JavaScript来控制交互。下面介绍一种常见的纯CSS实现方式，使用复选框（checkbox）来控制菜单的展开状态。
1. 基本HTML结构
使用一个复选框作为开关，配合
2. 核心CSS样式
利用复选框的:checked伪类控制内容区域的显示与隐藏：
.accordion {
width: 200px;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.menu-checkbox {
display: none; / 隐藏复选框 /
}
.menu-label {
display: block;
background: #007bff;
color: white;
padding: 10px;
text-align: center;
cursor: pointer;
user-select: none;
}
.menu-content {
max-height: 0;
overflow: hidden;
background: #f9f9f9;
transition: max-height 0.3s ease;
}
/ 当复选框被选中时，展开内容 /
.menu-checkbox:checked ~ .menu-content {
max-height: 200px; / 设置足够高度以容纳内容 /
}
3. 可选增强功能
让菜单更友好，可添加箭头图标指示状态：
立即学习“前端免费学习笔记（深入）”；
.menu-label::after {
content: " ▼";
font-size: 0.8em;
}
.menu-checkbox:checked ~ .menu-label::after {
content: " ▲";
}
也可以将max-height设为具体行高倍数，或使用transform + opacity实现淡入淡出效果。
4. 注意事项
- max-height设置要大于内容实际高度，否则会被裁剪
- transition动画让展开更自然
- 若需支持多个独立折叠项，每个需有唯一ID和对应结构
- 移动端注意触摸体验，label要足够大易点击
基本上就这些。用CSS加一点HTML技巧就能做出简洁的折叠菜单，不需要JavaScript也能实现基本交互。关键是利用表单元素的状态控制样式变化，这种方式兼容性好，性能也不错。
