jq与JS点击显示隐藏二级菜单的几种方法

//以下是JQ的方法,链式操作一行搞定!
  • 喇叭裤
      //初始化一个二级菜单显示
    • 短裤1
    • 短裤
    • 短裤
  • 喇叭裤
    • 短裤1
    • 短裤
    • 短裤
  • 喇叭裤
    • 短裤1
    • 短裤2
    • 短裤3
下面是原生JS实现的代码:

            以上代码兼容了IE并且把可重用的方法提取了出来,同时使用了事件代理来减少对DOM的操作来减少回流与重绘。原声JS操作看起来代码多了许多,但还是与JQ同样的思路,当点击一级菜单的时候,显示二级菜单,并且把其他的二级菜单关闭,而关闭与显示的操作的原理即为添加与删除class,我们可以通过transform animate等来添加一些动态效果,让显示与隐藏过渡的更加平滑。

有任何问题可在下方评论。


你可能感兴趣的:(JS学习)