使用 html 嵌套列表构建树形菜单结构，通过 css 设置样式与缩进，并结合 javaScript 实现展开 / 收起交互。示例包含三级菜单层级，CSS 去除默认列表样式并添加缩进和鼠标悬停效果，js 为父级菜单绑定点击 事件 ，切换子菜单display 状态，同时通过 aria-expanded 属性和 伪元素 图标提升可访问性与视觉提示，支持键盘导航与移动端触控，实现简洁易用的树形菜单。
构建树形菜单结构主要依靠 HTML 的嵌套列表（<ul> 和 <li>）来实现层级关系，再通过 CSS 控制样式以呈现清晰的折叠或展开效果。虽然 HTML 本身没有“函数”概念，但可以通过语义化的结构和 CSS/JS 配合实现动态树形菜单。
使用嵌套列表构建树形结构
树形菜单本质是多层嵌套的无序列表。每个菜单项用 <li> 表示，子菜单作为父级 <li> 内部的 <ul> 出现。
示例代码：
<ul class="tree-menu"> <li> <span>前端 开发 </span> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li> <span>javascript</span> <ul> <li><a href="#">es6</a></li> <li><a href="#">DOM 操作 </a></li> </ul> </li> </ul> </li> <li><a href="#">后端 开发 </a></li> </ul>CSS 控制树形菜单样式
通过 CSS 可以美化缩进、添加图标、控制展开 / 收起状态等。关键点包括：去除默认样式、设置缩进、添加视觉标识。
立即学习 “ 前端免费学习笔记（深入）”；
基础样式示例：
.tree-menu {list-style: none; padding-left: 0;} .tree-menu li {margin: 5px 0;} .tree-menu ul {list-style: none; padding-left: 20px; margin-top: 5px;} .tree-menu span {font-weight: bold; cursor: pointer;} .tree-menu a {text-decoration: none; color: #333;} .tree-menu a:hover {text-decoration: underline;}添加交互展开 / 收起功能（可选 JS）
若需要点击父级菜单展开子项，可用少量 JavaScript 控制 display 或添加类名。
示例脚本：
document.querySelectorAll('.tree-menu > li span').forEach(function(item) {item.addEventListener('click', function(e) {const subMenu = this.nextElementSibling; if (subMenu && subMenu.tagName === 'UL') {subMenu.style.display = subMenu.style.display === 'none' ? 'block' : 'none';} e.stopPropagation();}); });初始隐藏子菜单可在 CSS 中设置：.tree-menu ul ul {display: none;}，最外层根据需求决定是否默认展开。
优化体验与可访问性
增强用户体验的小技巧：
- 使用
aria-expanded属性标记展开状态 - 为可点击项添加小图标（如 + / – 或箭头）
- 支持键盘导航（Tab、Enter 触发展开）
- 移动端考虑触控区域大小
例如，在展开时切换图标：
span::before {content: '▶'; font-size: 0.8em; margin-right: 6px; transition: transform 0.2s;} span.expanded::before {content: '▼';}JS 中切换类名：this.classlist.toggle('expanded');
基本上就这些。结构清晰、样式可控、交互简单，就能做出实用的树形菜单。
