JS仿QQ好友列表展开、收缩功能(第二篇)


Posted in Javascript onJuly 07, 2017

在上篇的基础上继续完善,点击一个li元素,其他li元素上的类名清除掉。

效果图如下所示:

JS仿QQ好友列表展开、收缩功能(第二篇)

js:

<script>
 window.onload = function(){ 
 var list = document.getElementById('list'); 
 var ah2 = list.getElementsByTagName('h2'); 
 var uls = list.getElementsByTagName('ul');
 var lis = null;//用于下面的存储
 var arrli = [];//
 // 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 = '';
 }
 }
 }
 // 找到list里的所有ul,共有三个ul,所以用到for循环
 for(var i=0;i<uls.length;i++){//找到每一组ul
 lis = uls[i].getElementsByTagName('li');//找到uls中的所有li元素,存入到lis中,为什么要存一下呢?因为找到的li元素是一组元素的集合,要给每一个元素添加点击事件,存起来之后要再来一次for循环,for套for中间没有函数包着所以得换一个变量
 for(var j=0;j<lis.length;j++){//找到每组ul中的所有li
 arrli.push(lis[j]); //把每个li放到数组中,因为是要操作一组li中的每个,所以我们把它拎出来放在一起方便操作
 }
 }
 // 找到每个li之后进行点击事件操作
 for(var i=0;i<arrli.length;i++){
 arrli[i].onclick = function(){
 // 清除所有类名,只给当前点击的添加
 // 只保留一个li元素添加类名
 // 为什么用的是i呢?因为for套for它们中间有一层函数隔开(有函数包含的情况下作用域发生了改变),所以可以使用同样的i名称
 for(var i=0;i<arrli.length;i++){
  arrli[i].className = '';//去掉点击所有添加的类
 }
 this.className = 'hover';//给当前点击的li元素添加类名
 }
 }
 }
</script>

注意:

怎么区分for循环中有的用 i 有的用 j?

答:①如果是一个for循环,那么用 i 或者 j 哪个都行,一般是用 i .
②如果是两个for嵌套,那么看两个for中间有没有函数隔开:1.有函数隔开,那么这两个for循环中的变量都可以用 i 。2.没有函数隔开,那么这两个for循环中的变量不能使用相同的 i 来命名,一个 i ,一个 j .

例一:

下面是两个嵌套的for循环中没有函数隔开,所以一个是 i ,一个是 j .

for(var i=0;i<uls.length;i++){//找到每一组ul
 lis = uls[i].getElementsByTagName('li');
 for(var j=0;j<lis.length;j++){//找到每组ul中的所有li
 arrli.push(lis[j]); 
 }
}

例二:

也是两个嵌套的for循环中,有一个函数隔开,那么就可以使用同一个 i 来命名。

for(var i=0;i<arrli.length;i++){
 arrli[i].onclick = function(){ 
 for(var i=0;i<arrli.length;i++){
 arrli[i].className = '';//去掉点击所有添加的类
 }
 this.className = 'hover';//给当前点击的li元素添加类名
 }
}

以上所述是小编给大家介绍的JS仿QQ好友列表展开、收缩功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript将string类型转换int类型
Dec 09 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
document.forms用法示例介绍
Jun 26 Javascript
js显示文本框提示文字的方法
May 07 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
简单了解Vue computed属性及watch区别
Jul 10 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
分享19个JavaScript 有用的简写写法
Jul 07 #Javascript
You might like
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php类常量用法实例分析
2015/07/09 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
PHP中overload与override的区别
2017/02/13 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
简单分析python的类变量、实例变量
2019/08/23 Python
PyTorch安装与基本使用详解
2020/08/31 Python
python requests库的使用
2021/01/06 Python
极简的HTML5模版
2015/07/09 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
新学期开学寄语
2014/01/18 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书