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 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
php 强制下载文件实现代码
2013/10/28 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
React实现全选功能
2020/08/25 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
九月份红领巾广播稿
2014/01/22 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
2015年财政所工作总结
2015/04/25 职场文书
Django框架中表单的用法
2022/06/10 Python