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下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
浅谈javascript中的闭包
May 13 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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
解析wamp5下虚拟机配置文档
2013/06/27 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
Python实现ssh批量登录并执行命令
2016/10/25 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
python opencv实现图像配准与比较
2021/02/09 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
企划专员岗位职责
2013/12/09 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
本科毕业生求职信
2014/06/15 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
建党伟业观后感
2015/06/01 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
python脚本框架webpy的url映射详解
2021/11/20 Python