答案：通过CSS的:target伪类控制max-height实现折叠菜单，点击带锚点的标题触发内容显示隐藏，配合transition创建动画效果，并可用伪元素箭头指示状态。
实现一个简单的折叠菜单，主要通过 CSS 控制内容的显示与隐藏，配合一些过渡动画让效果更自然。下面是一个基础但实用的实现方式。
1. HTML 结构
使用一个容器包裹菜单标题和内容，便于用 CSS 控制展开与收起：
2. 基础 CSS 样式
设置菜单外观，并默认隐藏内容：
立即学习“前端免费学习笔记（深入）”；
.menu-header {
background-color: #444;
color: white;
padding: 10px;
cursor: pointer;
font-weight: bold;
}
.menu-content {
max-height: 0;
overflow: hidden;
background-color: #f9f9f9;
transition: max-height 0.3s ease-out;
}
.menu-content p {
margin: 10px;
}
3. 使用 :target 实现简单交互
利用锚点链接和 :target 伪类实现无 JavaScript 的折叠效果：
/* 当 menu-content 被 target 时展开 */
.menu-content:target {
max-height: 200px; /* 根据内容调整高度 */
}
修改 HTML 中的标题为可点击链接：
4. 可选：添加箭头图标指示状态
可以用伪元素做一个小三角，点击时翻转表示展开或收起：
.menu-header::after {
content: " ▼";
font-size: 0.8em;
transition: transform 0.3s;
}
.menu-header:hover::after {
opacity: 0.7;
}
/ 收起状态不旋转，展开时向下箭头变向上 /
.menu-content:target ~ .menu-header::after {
transform: rotate(180deg);
}
基本上就这些。这种方式无需 JavaScript，适合静态页面或对性能要求较高的场景。如果需要多个菜单项，复制结构并确保每个 id 唯一即可。虽然功能简单，但足够应对很多基础需求。
