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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
js特殊字符转义介绍
Nov 05 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
帝国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中实现图片的锐化
2006/10/09 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php rsa加密解密使用详解
2015/01/14 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
解读ES6中class关键字
2017/11/20 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
mac上配置Android环境变量的方法
2018/07/08 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
python线程的几种创建方式详解
2019/08/29 Python
python urllib爬虫模块使用解析
2019/09/05 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
文科生自我鉴定
2014/02/15 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2014年政协工作总结
2014/12/09 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python