首页>案例集

JavaScript案例5:QQ好友列表的展开和隐藏

QQ好友列表的展开和隐藏效果。

第一个案例的功能是:

1、点击好友列表的标题,打开下面的好友列表,再次点击标题, 关闭列表。多个好友列表之间互不影响。

2、点击好友名字,出现active高亮样式。

效果如图:

QQ列表展开收缩.gif

第二个案例稍微做了一点改变。

1、点击好友列表标题的时候,展开下方列表,但是会关闭其他好友列表。

2、再次点击的时候,关闭自己的好友列表。

效果如图:

QQ列表展开收缩第二版.gif

两个案例的核心知识点:

1、自定义属性

2、嵌套for循环遍历li

案例下载地址:

点赞


2
保存到:

相关文章

Top