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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
js每次Title显示不同的名言
Sep 25 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
如何在selenium中使用js实现定位
Aug 18 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 如何向 MySQL 发送数据
2006/10/09 PHP
初级的用php写的采集程序
2007/03/16 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
javascript定义函数的方法
2010/12/06 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
树结构之JavaScript
2017/01/24 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python安装gdal的两种方法
2019/10/29 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
行政人员岗位职责
2013/12/08 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
详解Javascript实践中的命令模式
2021/05/05 Javascript