实现京东的无延迟的菜单的效果

自己做过很多的下拉菜单的效果,其中因为项目需要自己就去学了京东的无延迟菜单的制作。 下面请看其中的代码: 京东无延迟效果*{padding:0;margin:

自己做过很多的下拉菜单的效果,其中因为项目需要自己就去学了京东的无延迟菜单的制作。

下面请看其中的代码:



京东无延迟效果


  • 1
  • 2
  • 3
  • 4
1>
one
2>
one
3>
one
4>
one

如果你们仔细看其中的前端中的html的代码,你不难发现其中一级菜单中用的是data-id,在二级菜单里面用的是id,其中存在的对应关系相信你们也注意到了吧!正因为这个对应关系在其中我们才会用到jq里面的data("id")这个方法了,剩下的就是其中的对于其中的activenone类的添加和删除了从而改变其中样式。

你也可以看到其中的注释里面的东西,写到一个防抖的东西,这里就是用到了其中的定时器进行延迟来解决其中的防抖的。