懒加载版本点击控制的无限极菜单哦

原创 悠游 随笔 前端之路 308阅读 2018-02-07 00:21:18 举报

上一个无限极菜单是不是看到都很想点一点?
哈哈,这次的就是可以点击的版本了。
本来设置的className = 'add'是一个小小的加号,className = 'line'是一个减号,因为用的是图片,估计加载不出来,大致情况是如果下一级还有菜单就显示为加号,如果下一级已经没有了就显示为减号。因为加载不了看上去不够直观,所以我改了设置,直接把有下一级的改成了背景色深粉色,打开后显示为浅粉色,没有下一级菜单的无背景色。时间不多,布局简陋,莫要吐槽哈。
递归是个神奇的小东西,省却了很多繁琐。
这个作品里我设置了每次同级的菜单只能打开一个,并且同时如果打开了父级菜单下面很多的子菜单,只要点击收回父级菜单,下面的子菜单也是可以直接收回的,再次打开就需要重新点击了。
最最主要的是,这个菜单使用了一点点懒加载,设置了只有点击时候,才加载下一级菜单的点击事件,文件小效果不是特别明显,如果以后写整个网站时候,这个方法就会很好用,只有达到一定条件,才添加事件让他加载,能节省加载时间和减轻服务器的工作量呢。
代码我都写了很详细的注释,大佬们莫要嫌繁琐,新手们都可以一点一点看的明白,大家有什么意见和建议,也都可以在评论区给我留言哦。
html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复