JavaScript实现QQ列表展开收缩扩展功能


Posted in Javascript onOctober 30, 2017

本文实例为大家分享了js实现QQ列表展开收缩扩展展示的具体代码,供大家参考,具体内容如下

效果图:

JavaScript实现QQ列表展开收缩扩展功能

代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul,h2{margin:0; padding:0;}
li{list-style-type:none;}
#list{margin:0 auto; border:#333 solid 1px; width:250px;}
#list h2 {background: url(../img/ico1.gif) no-repeat 5px 14px #0C6; text-indent:20px; height:32px; line-height:32px;}
#list ul li{text-indent:25px; border-bottom:#333 solid 1px; line-height:24px; height:23px; }
#list .active{background: url(../img/ico2.gif) no-repeat 5px 14px #693; text-indent:20px; height:30px; line-height:30px;}
#list ul{display:none;}
.hover{background:#CFC;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById("list");
var aUl =oUl.getElementsByTagName("ul");
var aH2 = oUl.getElementsByTagName("h2");
var aLi = null;
var arrLi = [];
var that = null;
for(i=0;i<aH2.length;i++){
 aH2[i].index = i;
 aH2[i].onclick = function(){
 if(this.className==''){
 for(i=0;i<aH2.length;i++){
aH2[i].className='';
aUl[i].style.display='none';
 }
this.className='active';
aUl[this.index].style.display = 'block';
}else{
this.className='';
aUl[this.index].style.display='none';
 }
             }
 }
for(i=0;i<aUl.length;i++){
  aLi =aUl[i].getElementsByTagName("li");
 for(j=0;j<aLi.length;j++){
  arrLi.push(aLi[j]);
 }
}
for(var i=0;i<arrLi.length;i++){
 arrLi[i].onclick = function(){
  for(i=0; i<arrLi.length;i++){ 
arrLi[i].className='';
 }
this.className = 'hover';
}
}

};
</script>
</head>


<body>
<ul id="list">
<li class="lis">
  <h2>我的好友</h2>
  <ul>
  <li>张三</li>
   <li>张四</li>
   <li>张五</li>
   <li>张六</li>
  </ul>
 </li>
 <li class="lis">
 <h2>企业好友</h2>
  <ul>
  <li>李四</li>
   <li>李小四</li>
   <li>李四二</li>
   <li>李毅</li>
   <li>李二</li>
  </ul>
 </li>
 <li class="lis">
 <h2>黑名单</h2>
  <ul>
  <li>张三</li>
  <li>李四</li>
  </ul>
 </li>
</ul>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
javascript实现日历效果
Jun 17 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 #Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 #Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 #Javascript
JavaScript数组push方法使用注意事项
Oct 30 #Javascript
JavaScript Date对象应用实例分享
Oct 30 #Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 #Javascript
Angularjs按需查询实例代码
Oct 30 #Javascript
You might like
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
可选择和输入的下拉列表框示例
2013/11/05 Javascript
javascript模拟命名空间
2015/04/17 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
详解Python高阶函数
2020/08/15 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
小学运动会班级口号
2014/06/09 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
MySQL约束超详解
2021/09/04 MySQL
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js