菜单折叠状态应存于localStorage，后端仅输出无展开逻辑的干净菜单树，前端通过模块控制器组合生成key并控制显示，配合CSS隐藏初始状态避免闪动。
ThinkPHP 动态菜单折叠本身不依赖框架内置功能，得靠前端状态 + 后端数据配合实现；关键不是“用什么组件”，而是“如何让折叠状态在页面跳转后依然保持”。
菜单折叠状态该存在哪？localStorage 是最稳妥的选择
服务端无法感知用户对某个菜单的展开/收起操作，所以状态必须存前端。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 字符串，只存开关状态，避免序列化/解析开销和兼容性问题
ThinkPHP 后端怎么配合？别渲染“默认展开”，把判断权交给前端
常见错误是后端根据当前 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
当菜单有三级甚至更深嵌套（如 “系统设置 > 权限管理 > 角色列表”），仅靠单个 ID 无法区分父子关系。直接存完整 URL 路径又太重，推荐用模块+控制器组合做 key。
立即学习“PHP免费学习笔记（深入）”；
- 例如菜单项对应
admin/role/index，生成 key 为menu-opened-admin-role（去掉方法名） - 展开“权限管理”时，设置
localStorage.setItem('menu-opened-admin-role', 'true')；点击“角色列表”页面时，也检查这个 key 是否为'true' - 这样既避免每级都存一个 key，又能保证同模块下所有子项共享折叠状态，符合用户直觉
刷新后菜单闪动？加一层 CSS 隐藏初始状态
JS 执行有延迟，DOM 渲染完、localStorage 读取完之前，菜单默认是收起的，用户会看到“先收再展”的闪烁。
- 在
<head>里加一段内联 CSS：ul.submenu { display: none !important; } - 等 JS 加载并判断完 localStorage 后，再用 JS 移除这个强制隐藏或添加
open类 - 不要依赖
window.onload，改用document.addEventListener('DOMContentLoaded', ...)，更快触发
真正难的不是写几行 JS 折叠菜单，而是想清楚：状态该谁管、什么时候读、key 怎么设计才不冲突、以及如何不让用户看见 DOM 重绘过程。这些细节没对齐，再多的“动态”也只是看起来在动。
