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


Posted in Javascript onJuly 07, 2017

效果图如下所示:

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

html:

<ul id="list">
 <li class="lis">
  <h2>我的好友</h2>
  <ul>
   <li>张三</li>
   <li>李四</li>
   ...
  </ul>
 </li>
 <li class="lis">
  <h2>企业好友</h2>
  <ul>
   <li>小明</li>
   <li>小红</li>
   ...
  </ul>
 </li>
 <li class="lis">
  <h2>黑名单</h2>
  <ul>
   <li>哈哈</li>
   ...
  </ul>
 </li>
</ul>

css:

ul,h2 {padding: 0;margin: 0;}
li {list-style: none;}
#list {
 width: 240px;
 border: 1px solid #ccc;
 margin: 0 auto;
}
#list .lis { }
#list h2 {
 height: 30px;
 line-height: 30px;
 text-indent: 20px;/*文字缩进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:

window.onload = function(){   
 var list = document.getElementById('list');   
 var ah2 = list.getElementsByTagName('h2');   
 var uls = list.getElementsByTagName('ul');
 // h2要和下面的ul进行匹配,所以我们要用索引值,给h2身上添加索引值
 for(var i=0;i<ah2.length;i++){    
  ah2[i].index = i;//给h2添加索引值,点击谁就给谁添加索引值
  ah2[i].onclick = function(){
   if(this.className == ''){//判断所点击的h2标签是否有类,
    //this.index指h2身上的索引数,this指h2,h2的索引值为this.index
    uls[this.index].style.display = 'block'; 
    this.className = 'active';//给当前点击的h2添加类,更改箭头方向
   }else{
    uls[this.index].style.display = 'none';
    this.className = '';
   }
  }
 }
}

下篇给大家介绍:JS仿QQ好友列表展开、收缩功能(第二篇)

以上所述是小编给大家介绍的JS仿QQ好友列表展开、收缩功能(第一篇),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 #Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 #Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 #Javascript
JS实现搜索关键词的智能提示功能
Jul 07 #Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 #Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 #Javascript
微信小程序之绑定点击事件实例详解
Jul 07 #Javascript
You might like
最省空间的计数器
2006/10/09 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python实现京东秒杀功能
2018/07/30 Python
Python同步遍历多个列表的示例
2019/02/19 Python
深入了解Django中间件及其方法
2019/07/26 Python
python应用文件读取与登录注册功能
2019/09/23 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
详解Python 中的容器 collections
2020/08/17 Python
Python实现自动签到脚本功能
2020/08/20 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
广告创意求职信
2014/03/17 职场文书
继承公证书
2014/04/09 职场文书
创先争优活动心得体会
2014/09/04 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS