制作可折叠树形菜单的常见html结构模式是使用嵌套的无序列表，1. 以<ul>作为容器，每个菜单项用<li>表示；2. 在<li>内包含可点击的文本和展开/收起图标（如span.toggle）；3. 若有子菜单，则在对应<li>内嵌套新的<ul class="nested">，形成层级结构；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>来作为展开/折叠的图标。这样可以分别控制它们的样式和点击事件。关键在于，每一个可能包含子菜单
