树形折叠菜单需HTML嵌套ul构建结构，CSS控制缩进、图标及display隐藏子菜单，JavaScript通过toggle类切换显隐并更新图标。
用 HTML 无序列表（<ul></ul>）实现树形折叠菜单，核心不是靠 HTML 单独完成，而是结合 CSS 控制显示/隐藏 + JavaScript 处理点击交互。HTML 只负责结构，真正“折叠”靠 JS 控制类名或样式，CSS 负责视觉呈现。
结构：嵌套 <ul> 构建层级
树形菜单本质是多层嵌套的无序列表。每一级 <li> 可包含文字、按钮（用于展开/收起）和子 <ul>：
<ul class="tree-menu">
<li>
<span class="toggle">?</span> 文档
<ul>
<li>入门指南</li>
<li>API 手册</li>
</ul>
</li>
<li>
<span class="toggle">?</span> 设置
<ul>
<li>账号</li>
<li>通知</li>
</ul>
</li>
</ul>
CSS：默认隐藏子菜单 + 添加缩进和图标
用 CSS 控制子 <ul> 默认不显示，并添加层级缩进与折叠指示图标：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给所有子
<ul>设置display: none，再用 JS 切换display: block或加/删类名 - 用
margin-left或padding-left实现视觉缩进，例如ul ul { margin-left: 1.2em; } - 用
::before或内联<span class="toggle">显示 ▶️ / ▼ 图标，配合 JS 动态切换 - 可选：加过渡动画，如
max-height+overflow: hidden实现平滑展开（需固定高度或 JS 计算）
JavaScript：绑定点击事件控制展开/收起
监听所有 .toggle 元素的点击，找到它后面紧邻的 <ul>，切换其显隐状态：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('.toggle').forEach(toggle => {
toggle.addEventListener('click', () => {
const nextUl = toggle.nextElementSibling;
if (nextUl && nextUl.tagName === 'UL') {
nextUl.classList.toggle('open');
// 同时可更新图标，比如：toggle.textContent = nextUl.classList.contains('open') ? '▼' : '▶️';
}
});
});
对应 CSS 中定义：.tree-menu ul:not(.open) { display: none; } 或更推荐用 .tree-menu ul { display: none; } .tree-menu ul.open { display: block; }
增强体验的小细节
- 默认只展开第一级，或通过初始类名（如
<ul class="open">）控制默认展开项 - 支持键盘操作：为
.toggle加tabindex="0"，监听Enter或Space键 - 避免重复初始化：用事件委托代替遍历每个
.toggle，适合动态加载菜单 - 移动端适配：考虑点击区域大小、避免误触，必要时加
touchstart事件
