在后台管理系统、OA系统、企业级项目中，树形菜单、组织架构树是出现频率极高的功能。常见用于部门层级展示、人员架构、权限菜单、分类层级等场景。
很多新手开发树形结构时，会被多层嵌套递归渲染难住，不知道如何处理无限层级的父子关系。
今天给大家分享一套极简、轻量、无插件的 jQuery 树形菜单解决方案：通过扁平化数组 + 递归函数实现无限层级树结构，自带展开/收起动画、旋转箭头交互，代码干净易懂，可直接落地到项目！
一、项目功能介绍
本次树形菜单 Demo 实现了企业开发常用的核心能力，完全贴合实际业务场景：
- 无限层级递归渲染：支持公司、部门、小组、人员多层级嵌套，不限层级深度
- 扁平化数据结构：采用业界标准的 id + parentId 结构，适配后端返回数据
- 优雅展开收起交互：点击箭头平滑切换，自带旋转动画过渡
- 分层缩进视觉：层级缩进清晰，完美区分父子节点关系
- 原生jQuery实现：无需引入任何树形插件，轻量化、无冗余、兼容性极强
二、完整可运行源码
以下是优化整理后的完整代码，结构清晰、注释齐全，新建 HTML 文件，放入 jQuery 文件即可直接运行。
jQuery无限层级树状菜单
三、核心代码逻辑详解 1、标准扁平化数据结构 项目采用企业开发最通用的id + parentId 扁平化数据结构，不需要后端返回嵌套树形，前端自行递归组装，极大减轻后端压力。 核心规则： - 根节点：parentId: null - 子节点：parentId 对应父节点的 id - 支持无限层级嵌套，适配任意深度组织架构 2、递归渲染核心函数 arborescence 递归函数是整个树形结构的核心： 1、通过 filter 筛选出当前层级的所有子节点； 2、遍历子节点，再次调用自身递归获取下级子节点HTML； 3、逐层拼接 HTML，最终组装成完整树形结构。 这种写法是前端树形结构的经典标准答案，面试和项目开发高频使用。 3、展开收起动画交互 摒弃生硬的显示隐藏，采用 jQuery 自带的 slideToggle 实现平滑过渡，搭配 CSS 旋转动画： - 默认所有子节点折叠隐藏 - 点击箭头，竖向平滑展开/收起 - 箭头同步旋转90°，视觉交互直观清晰 四、代码优势与亮点 - 零插件依赖：纯 jQuery + 原生递归，无需引入 zTree、treeview 等插件，轻量化无负担 - 适配真实业务：数据结构完全对接后端接口，可直接替换接口数据使用 - 无限层级通用：不限部门、人员嵌套层级，适配分类树、菜单树、组织树 - 交互体验优秀：动画过渡柔和，层级缩进清晰，UI 简洁商务 - 极易二次开发：可快速拓展节点选中、点击高亮、节点删除、新增、搜索筛选功能 五、项目拓展方向 基于当前基础树形结构，可快速拓展企业级完整功能： 1. 节点点击高亮：点击部门/人员节点增加选中样式 2. 树形搜索筛选：输入关键词模糊匹配节点，自动展开对应层级 3. 新增/删除节点：动态修改数组数据，局部刷新树形结构 4. 默认展开指定层级：默认展开一级/二级节点，提升体验 5. 区分节点图标：部门、人员、分组配置不同图标 六、总结 1、前端树形结构的核心原理就是 扁平化数据 + 递归渲染，掌握这套逻辑可以应对所有树形场景； 2、本案例代码精简、无冗余、无 bug，完全适配后台管理系统、OA、CRM 等企业项目； 3、相比臃肿的第三方树形插件，原生递归方案更轻量、自定义程度更高、性能更好。