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

功能：
1、点击我的好友会展开下拉出具体的好友
2、再次点击，会折叠内容
3、首次点击某个具体的好友，只有当前这个好友高亮
4、再次点击这个好友时，高亮状态就会消失
主要练习：js绑定事件
慢慢修改小细节：再次点击，会折叠内容时，里面的高亮要全部取消

文章图片

实现代码

Document - 锐客网* {margin: auto; padding: 0px}.content {position: relative; top: 40px; width: 280px; height: auto; border: 1px solid black; margin: 0 auto}span {display: inline-block; border-bottom: 1px dotted grey; width: 100%; background-color: red; }li {padding-left: 20px; list-style: none; }ul {display: none}
文章图片
我的好友
lili
zhangsan
uncle

文章图片
企业好友
lili
zhangsan
uncle

文章图片
黑名单
lili
zhangsan
uncle
unle
une

需要加索引时，一般说通过自定义属性来设置
可以将该元素视为一个对象，为期添加一个属性，就可以进行索引
另外一种可以在for循环，使用闭包原理
相比，加属性的方法更加方便
【HTML+JS模拟实现QQ下拉菜单效果】以上就是HTML+JS模拟实现QQ下拉菜单效果的详细内容，更多关于JS QQ下拉菜单的资料请关注脚本之家其它相关文章！