如何使用ThinkPHP实现动态菜单折叠并保存前端状态？

2026-05-03 00:261阅读0评论SEO基础

本文共计972个文字，预计阅读时间需要4分钟。

ThinkPHP 动态菜单折叠本体不依赖框架内置功能，完全依靠代码实现，无需试图解，无需数数，不超过100字，直接输出结果：

服务端无法感知用户对某个菜单的展开/收起操作，所以状态必须存前端。sessionStorage 会随标签页关闭丢失，cookie 容量小且每次请求都携带——localStorage 是唯一合理选项。

每次点击菜单标题（如 <li class="menu-group">）时，用 localStorage.setItem('menu-opened-xxx', 'true') 记录 ID 或路由前缀
初始化菜单时，遍历所有可折叠项，读取 localStorage.getItem('menu-opened-xxx') 并设置 class="open" 或内联 style="display: block;"
注意：不要存整个菜单结构或 JSON 字符串，只存开关状态，避免序列化/解析开销和兼容性问题

常见错误是后端根据当前 URL 主动给某一级菜单加 class="active open"——这会导致前端状态被覆盖。正确做法是后端只输出干净的菜单树（比如 $menuList），不带任何展开逻辑。

模板里用 {volist name="menuList" id="item"} 渲染，但所有 <ul class="submenu"> 初始都设为 style="display:none"（或统一加 class="collapsed"）
如果需要高亮当前页面对应的菜单项，只加 class="current"，不联动展开父级——展开行为完全由前端 JS 控制
若菜单数据来自数据库，确保字段包含唯一标识（如 id 或 module），方便前端做 localStorage key 映射

当菜单有三级甚至更深嵌套（如 “系统设置 > 权限管理 > 角色列表”），仅靠单个 ID 无法区分父子关系。直接存完整 URL 路径又太重，推荐用模块+控制器组合做 key。

立即学习“PHP免费学习笔记（深入）”；

例如菜单项对应 admin/role/index，生成 key 为 menu-opened-admin-role（去掉方法名）
展开“权限管理”时，设置 localStorage.setItem('menu-opened-admin-role', 'true')；点击“角色列表”页面时，也检查这个 key 是否为 'true'
这样既避免每级都存一个 key，又能保证同模块下所有子项共享折叠状态，符合用户直觉

JS 执行有延迟，DOM 渲染完、localStorage 读取完之前，菜单默认是收起的，用户会看到“先收再展”的闪烁。

在 <head> 里加一段内联 CSS：ul.submenu { display: none !important; }
等 JS 加载并判断完 localStorage 后，再用 JS 移除这个强制隐藏或添加 open 类
不要依赖 window.onload，改用 document.addEventListener('DOMContentLoaded', ...)，更快触发

真正难的不是写几行 JS 折叠菜单，而是想清楚：状态该谁管、什么时候读、key 怎么设计才不冲突、以及如何不让用户看见 DOM 重绘过程。这些细节没对齐，再多的“动态”也只是看起来在动。

本文共计972个文字，预计阅读时间需要4分钟。

ThinkPHP 动态菜单折叠本体不依赖框架内置功能，完全依靠代码实现，无需试图解，无需数数，不超过100字，直接输出结果：

每次点击菜单标题（如 <li class="menu-group">）时，用 localStorage.setItem('menu-opened-xxx', 'true') 记录 ID 或路由前缀
初始化菜单时，遍历所有可折叠项，读取 localStorage.getItem('menu-opened-xxx') 并设置 class="open" 或内联 style="display: block;"
注意：不要存整个菜单结构或 JSON 字符串，只存开关状态，避免序列化/解析开销和兼容性问题

模板里用 {volist name="menuList" id="item"} 渲染，但所有 <ul class="submenu"> 初始都设为 style="display:none"（或统一加 class="collapsed"）
如果需要高亮当前页面对应的菜单项，只加 class="current"，不联动展开父级——展开行为完全由前端 JS 控制
若菜单数据来自数据库，确保字段包含唯一标识（如 id 或 module），方便前端做 localStorage key 映射

立即学习“PHP免费学习笔记（深入）”；

例如菜单项对应 admin/role/index，生成 key 为 menu-opened-admin-role（去掉方法名）
展开“权限管理”时，设置 localStorage.setItem('menu-opened-admin-role', 'true')；点击“角色列表”页面时，也检查这个 key 是否为 'true'
这样既避免每级都存一个 key，又能保证同模块下所有子项共享折叠状态，符合用户直觉

JS 执行有延迟，DOM 渲染完、localStorage 读取完之前，菜单默认是收起的，用户会看到“先收再展”的闪烁。

在 <head> 里加一段内联 CSS：ul.submenu { display: none !important; }
等 JS 加载并判断完 localStorage 后，再用 JS 移除这个强制隐藏或添加 open 类
不要依赖 window.onload，改用 document.addEventListener('DOMContentLoaded', ...)，更快触发