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 dom 基本操作小结
Apr 11 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
js动态设置div的值下例子
Oct 29 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
Ajax实现三级联动效果
Oct 05 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
桌面中心(一)创建数据库
2006/10/09 PHP
php 文章调用类代码
2011/08/11 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
python操作excel让工作自动化
2019/08/09 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
司机岗位职责说明书
2014/07/29 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
法人身份证明书
2015/06/18 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书