JS仿QQ好友列表展开、收缩功能(第一篇)

前端之家收集整理的这篇文章主要介绍了JS仿QQ好友列表展开、收缩功能(第一篇)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果图如下所示:

这里写图片描述

html:

我的好友
  • 张三
  • 李四
  • ...
  • 企业好友
    • 小明
    • 小红
    • ...
  • 黑名单
    • 哈哈
    • ...
  • css:

    文字缩进20px*/ background: url(img/ico1.gif) no-repeat 5px center pink;/*前面小箭头*/ cursor: pointer; } #list .active { /* 点击时添加的类名 */ background: url(img/ico2.gif) no-repeat 5px center #ff9; } #list ul {display: none;} #list ul li { line-height: 24px; border-bottom: 2px solid #fc4; text-indent: 24px;/*文字缩进24px*/ }

    js:

    添加索引值 for(var i=0;i

    下篇给大家介绍:

    以上所述是小编给大家介绍的JS仿QQ好友列表展开、收缩功能(第一篇)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/js/38018.html

    猜你在找的JavaScript相关文章