JavaScript树形菜单简洁实现
层级清晰的文件管理、结构展示的组织架构图、展开灵活的网站导航，少不了一个靠谱的树形菜单。JavaScript配合点HTML/CSS，其实就能搞定。
数据结构方面，用一个嵌套的JSON就行，每个节点里放id、title、children这些字段，够用了。前端遍历数据生成结构，点开收起用事件监听搞定，思路清晰。
结构上，通常用;
class做样式区分，比如.collapsed控制是否显示子节点。CSS里用display: none来隐藏子节点，简单粗暴。
交互逻辑就更简单了，给每个节点加个onclick事件，判断当前状态切换class就完了。需要懒加载的，可以加个异步求，后端返回子节点再插进去。
性能上别忘了，节点太多就别一口气全加载。你可以用“点一下才加载”的方式，这样页面一开始就清爽不少，用户体验也不会掉链子。
如果你用Java，后端用Struts配合前端dtree插件也挺方便，前面有个文档struts 实现 java 树形菜单（使用 dtree）.doc可以看看思路。
文件里还有个树型菜单.rar，是另外一个 JS 实现的例子，逻辑挺清楚，页面结构也不复杂。适合你直接上手动手试一试。
，这种js 树形菜单实现起来并不难，关键是要理清结构和交互逻辑。如果你项目里刚好需要展示点结构层级的东西，可以从这套开始玩玩。
文件大小：2.08MB
评论区