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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 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
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
JS排序之冒泡排序详解
2017/04/08 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python中的sort()方法使用基础教程
2017/01/08 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
禁毒主题班会教案
2015/08/14 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis