HTML+JS模拟实现QQ下拉菜单效果

功能:

1、点击我的好友会展开下拉出具体的好友

2、再次点击,会折叠内容

3、首次点击某个具体的好友,只有当前这个好友高亮

4、再次点击这个好友时,高亮状态就会消失

主要练习:js绑定事件

慢慢修改小细节:再次点击,会折叠内容时,里面的高亮要全部取消

HTML+JS模拟实现QQ下拉菜单效果_第1张图片

实现代码



 

    
    
    
    Document
    

 

    
我的好友
  • lili
  • zhangsan
  • uncle
企业好友
  • lili
  • zhangsan
  • uncle
黑名单
  • lili
  • zhangsan
  • uncle
  • unle
  • une

需要加索引时,一般说通过自定义属性来设置

可以将该元素视为一个对象,为期添加一个属性,就可以进行索引

另外一种可以在for循环,使用闭包原理

相比,加属性的方法更加方便

以上就是HTML+JS模拟实现QQ下拉菜单效果的详细内容,更多关于JS QQ下拉菜单的资料请关注脚本之家其它相关文章!

你可能感兴趣的:(HTML+JS模拟实现QQ下拉菜单效果)