JavaScript树型菜单组件
树型菜单的结构其实挺直观的，顶层是大项，下面一层层子菜单展开，点哪展开哪，页面干净不乱。这套用 JS 写的方案，逻辑清晰，数据结构也好维护，用JSON表示菜单关系，看着也一目了然。
JSON 结构就像这样：
{
"text": "顶级菜单",
"children": [
{ "text": "子菜单 1", "children": [
{"text": "子菜单 1-1"},
{"text": "子菜单 1-2"}
] },
{ "text": "子菜单 2", "children": [] }
]
}用搭基本结构，每个菜单项一个，嵌套子菜单就嵌套一个
JS 这块，写个递归函数，把上面的JSON数据转换成HTML就行。要点就是判断有没有children，有的话就递进去一层。
样式上，别忘了搞点交互效果。比如加个小三角，点一下就能展开/收起，用display: none控制显示，顺手再加个transition，感觉就舒服多了。
性能上，如果你的菜单是几十几百个节点的那种，建议懒加载。就是用户点开的时候才加载子菜单，页面初始渲染压力就小了。
想玩得更花一点，可以再加点功能，比如搜索节点、支持拖拽换顺序、甚至多选。扩展性不错，只要结构清晰，后面都好。
如果你正在做后台权限管理、产品分类页这类项目，树型菜单就合适，用户操作起来也顺手。
文件大小：13.27KB
评论区