如何用css实现简单折叠菜单

P粉602998670 2025-10-15 00:00:00 次阅读

答案：通过CSS的:target伪类控制max-height实现折叠菜单，点击带锚点的标题触发内容显示隐藏，配合transition创建动画效果，并可用伪元素箭头指示状态。

实现一个简单的折叠菜单，主要通过 CSS 控制内容的显示与隐藏，配合一些过渡动画让效果更自然。下面是一个基础但实用的实现方式。

1. HTML 结构

使用一个容器包裹菜单标题和内容，便于用 CSS 控制展开与收起：

点击展开/收起

这里是折叠菜单中的内容，可以是任意HTML元素。

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 唯一即可。虽然功能简单，但足够应对很多基础需求。