JavaScript树形菜单实现
树形菜单的交互体验，其实蛮多地方都用得到，像后台管理、文档目录啥的，层级一多，用个列表就不太直观了。这种时候，搞个能展开收起的树形菜单，用户操作起来就顺手多了。
HTML 结构挺，一个套，多层嵌套就是多一层
- 。给每个菜单加个toggle按钮，比如“+”或“−”，点一下就展开或折叠下面的子项。简单粗暴但挺好用。
核心在JavaScript事件这块。写个监听器，用document.getElementsByClassName('toggle')把所有“+”图标找出来，点一下切换它旁边那块的显示状态：display: none 或 display: block。像下面这样：
document.addEventListener('DOMContentLoaded', function() {
var toggles = document.getElementsByClassName('toggle');
for (var i = 0; i < toggles xss=removed xss=removed childList.style.display = 'block' this[removed] = '-' childList.style.display = 'none' this[removed] = '+'>你也可以搭配点CSS做出更顺滑的过渡，比如加个transition效果，响应也快，用户体验更丝滑。
图标那块，不嫌麻烦的话可以弄几张图放到images目录，样式用background-image引进去。图标换一下，菜单就显得更专业点，是给客户看的时候。
要是你的菜单层级比较深，还可以考虑做懒加载，用户点了才去加载子节点，页面一开始不会太重，加载速度也能提一点。
哦对了，如果你想看看具体例子或者找找轮子用，下面几个链接还不错：
如果你在做后台管理页面，或者文档目录管理，可以试试用这类树形菜单实现，简单、清晰，还挺有成就感的。
文件大小：4.98KB
评论区