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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
iview table高度动态设置方法
Mar 14 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 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
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
基于PHP文件操作的详解
2013/06/05 PHP
浅析php单例模式
2014/11/25 PHP
php中Snoopy类用法实例
2015/06/19 PHP
初识ThinkPHP控制器
2016/04/07 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
详解js中==与===的区别
2017/01/08 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
js实现表格数据搜索
2020/08/09 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
Python 文件读写操作实例详解
2014/03/12 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python字符串连接方法分析
2016/04/12 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
python matplotlib拟合直线的实现
2019/11/19 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
小学教师求职信范文
2015/03/20 职场文书