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的jquery地区联动效果代码
Jul 06 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
js仿360开机效果
Dec 26 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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
德生9700DX电路分析
2021/03/02 无线电
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
js验证是否为数字的总结
2013/04/14 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
JS实现小星星特效
2019/12/24 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
Python实现常见的回文字符串算法
2018/11/14 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
python使用Geany编辑器配置方法
2020/02/21 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
如何用python处理excel表格
2020/06/09 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
python中的测试框架
2020/11/13 Python
事业单位请假制度
2014/01/13 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
JavaScript组合继承详解
2021/11/07 Javascript