侧边栏折叠树形菜单用嵌套<ul> <li>实现层级结构，CSS控制显隐（推荐max-height过渡），JS切换expanded类，配合伪元素箭头、缩进和响应式适配。
用 HTML 列表标签（<ul>、<li>）制作侧边栏折叠树形菜单，核心是利用嵌套结构 + CSS 控制显隐 + 少量 JS 实现交互。它不依赖框架，轻量、可控，适合静态或简单动态场景。
基础 HTML 结构：用嵌套列表表达层级
树形菜单的本质是父子关系，<ul> 和 <li> 天然支持这种嵌套。一级菜单项是顶层 <li>，子菜单放在对应 <li> 内部的 <ul> 中：
- 首页
- 用户管理
- 用户列表
- 角色权限
- 部门设置
- 系统设置
- 参数配置
- 日志审计
- 操作日志
- 登录日志
注意：无需额外 class 或 ID 即可表达三级结构；但为便于控制，建议给最外层 <ul> 加一个明确的 class，如 class="sidebar-menu"。
CSS 控制折叠与展开状态
默认隐藏所有子级 <ul>，鼠标悬停或点击时才显示。关键靠 :hover 或配合 checkbox hack / JS 切换 class：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
:hover实现纯 CSS 悬停展开（适合桌面端）：.sidebar-menu ul { display: none; }.sidebar-menu li:hover > ul { display: block; } - 用 checkbox + label 实现点击切换（无 JS，兼容性好）：
在每个可折叠项前加隐藏 checkbox，用label触发，通过:checked ~ ul控制显示 - 更推荐：添加
class="collapsed"控制，默认隐藏，JS 点击时切换该 class，CSS 定义：.sidebar-menu ul { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }.sidebar-menu ul.expanded { max-height: 500px; }
（用max-height替代display可实现平滑过渡）
添加图标和视觉反馈
提升可用性需明确标识“可折叠”：
- 在有子菜单的
<li>后插入小箭头（如 ▶ / ▼），可用 CSS 伪元素生成：.sidebar-menu li > ul { position: relative; }.sidebar-menu li:has(> ul)::after { content: "▶"; font-size: 12px; margin-left: 8px; }.sidebar-menu li > ul.expanded + .arrow::after { content: "▼"; } - 选中态高亮：给当前激活菜单项加背景色或边框，例如通过 URL 匹配或 JS 设置
class="active" - 缩进与间距：用
padding-left区分层级，每级增加 20px 左右，让结构一目了然
响应式适配侧边栏收起/展开
在小屏下，侧边栏通常收为窄条（仅图标），点击再展开完整菜单：
- 用媒体查询控制宽度：
@media (max-width: 768px) { .sidebar { width: 60px; } } - 窄状态下只显示图标，文字用
overflow: hidden隐藏，或用span包裹文字并设opacity: 0 - 添加汉堡按钮（☰）触发全量菜单显示，配合
transform: translateX(0)动画滑入 - 确保右侧内容区域自动适配：侧边栏展开时，内容区
margin-left增大；收起时还原 —— 可用 JS 监听按钮状态同步调整
