制作可折叠树形菜单的常见html结构模式是使用嵌套的无序列表，1. 以
- 作为容器，每个菜单项用
- 表示；2. 在
- 内包含可点击的文本和展开/收起图标（如span.toggle）；3. 若有子菜单，则在对应
- 内嵌套新的
- ，形成层级结构；4. 通过css控制缩进与显示隐藏，javascript实现交互切换，最终构建出清晰、可交互的树形菜单结构。
制作HTML树形菜单，实现可折叠目录，核心在于巧妙地结合HTML的嵌套列表结构、CSS的视觉控制以及JavaScript的交互逻辑。它就像你文件管理器里的文件夹，点一下展开，再点一下收起，背后的原理就是这三者的协同作用，缺一不可。
要构建一个可折叠的树形菜单，我们通常会从一个嵌套的无序列表（
<ul>
）开始。每个菜单项是一个<li>
，如果这个<li>
下面还有子菜单，那么子菜单本身又是一个嵌套的<ul>
。HTML 结构： 想象一下你的文件系统，它通常长这样：
<div class="tree-menu"> <ul> <li> <span class="toggle">▶</span> 文件夹A <ul class="nested"> <li>文件A-1</li> <li>文件A-2</li> </ul> </li> <li> <span class="toggle">▶</span> 文件夹B <ul class="nested"> <li>文件B-1</li> <li> <span class="toggle">▶</span> 文件夹B-2 <ul class="nested"> <li>文件B-2-1</li> </ul> </li> </ul> </li> <li>文件C</li> </ul> </div>这里，
span.toggle
就是我们用来点击展开/收起的那个小箭头或者加号。ul.nested
是默认需要隐藏的子菜单。立即学习“前端免费学习笔记（深入）”；
CSS 样式： 样式是让它看起来像个菜单的关键。我们需要隐藏子菜单，并给父级菜单添加一些视觉提示。我个人很喜欢给箭头加个旋转动画，看起来会更流畅，用户体验上瞬间提升一个档次。
.tree-menu ul { list-style: none; /* 移除默认的项目符号 */ padding-left: 0; /* 移除默认的左内边距 */ } .tree-menu li { margin: 5px 0; cursor: pointer; /* 鼠标悬停时显示手型 */ /* 确保点击 li 任意位置也能触发，但事件绑定时要小心 */ } /* 嵌套的 ul，增加左边距来创建层次感 */ .tree-menu ul ul { padding-left: 25px; /* 每次嵌套增加 25px 缩进 */ } .tree-menu li .nested { display: none; /* 默认隐藏所有子菜单 */ overflow: hidden; /* 配合 max-height 做动画 */ max-height: 0; transition: max-height 0.3s ease-out; /* 平滑展开动画 */ } .tree-menu li .nested.active { display: block; /* 实际显示 */ max-height: 500px; /* 设置一个足够大的值，确保内容能完全显示 */ } .tree-menu .toggle { display: inline-block; width: 1em; /* 确保有足够空间显示图标 */ text-align: center; margin-right: 8px; font-size: 0.8em; /* 小一点的图标 */ transition: transform 0.2s ease-in-out; /* 箭头旋转动画 */ } .tree-menu .toggle.rotated { transform: rotate(90deg); /* 展开时箭头旋转 */ }JavaScript 逻辑： 这是让菜单“活”起来的部分。我们需要监听点击事件，然后切换子菜单的显示状态，并更新箭头方向。这事儿吧，其实不复杂，但逻辑要清晰。
document.addEventListener('DOMContentLoaded', function() { const treeMenu = document.querySelector('.tree-menu'); if (treeMenu) { // 使用事件委托，将事件监听器绑定到父容器上 treeMenu.addEventListener('click', function(event) { const target = event.target; // 检查点击的是否是 .toggle 元素，或者 li 内部有 .toggle 且点击了 li 自身 // 这样可以确保点击图标或菜单文本都能触发 if (target.classList.contains('toggle') || (target.tagName === 'LI' && target.querySelector('.toggle'))) { const li = target.closest('li'); // 找到被点击元素最近的 li 父级 if (!li) return; // 如果没有 li，则不处理 const toggleSpan = li.querySelector('.toggle'); // 确保只选择当前 li 下的直接子 ul.nested const nestedUl = li.querySelector(':scope > .nested'); if (nestedUl && toggleSpan) { nestedUl.classList.toggle('active'); // 切换显示/隐藏状态 toggleSpan.classList.toggle('rotated'); // 切换箭头方向 } } }); } });我个人更倾向于事件委托，因为它能更好地处理动态添加的菜单项，而且代码量也相对简洁，在大菜单时性能优势更明显。搞定这个，你就成功了一大半了。
制作可折叠树形菜单时，有哪些常见的HTML结构模式？
关于HTML结构，说到底，就是如何清晰地表达层级关系。最常见、也最符合语义化的，无疑是嵌套的无序列表
<ul>
和列表项<li>
。这就像你用纸笔画大纲，每一级都缩进一点。一个典型的模式是：
<ul> <li> <!-- 这一层是父级菜单项，通常包含可点击的文本和/或图标 --> <span class="menu-item-text">父级菜单项标题</span> <span class="expand-collapse-icon"></span> <!-- 比如一个箭头或加减号 --> <!-- 如果有子菜单，就在这里嵌套一个 ul --> <ul class="sub-menu"> <li>子菜单项1</li> <li>子菜单项2</li> <!-- 子菜单项也可以继续嵌套 --> <li> <span class="menu-item-text">更深层级</span> <span class="expand-collapse-icon"></span> <ul class="sub-sub-menu"> <li>最深层级</li> </ul> </li> </ul> </li> <li>另一个父级菜单项</li> </ul>我喜欢在
<li>
里面放一个<span>
来包裹菜单文本，再放一个<span>
或者<i>
来作为展开/折叠的图标。这样可以分别控制它们的样式和点击事件。关键在于，每一个可能包含子菜单
