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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
浅谈javascript回调函数
Dec 07 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
vue实例的选项总结
Jun 09 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 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
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
微信API接口大全
2015/04/15 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
在Python中使用成员运算符的示例
2015/05/13 Python
pandas-resample按时间聚合实例
2019/12/27 Python
信号生成及DFT的python实现方式
2020/02/25 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
荷兰超市:DEEN
2018/03/14 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
了解AppleTalk协议吗
2014/04/01 面试题
大学生学习党课思想汇报
2014/01/03 职场文书
煤矿安全承诺书
2014/05/22 职场文书
法律专业求职信
2014/05/24 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android