JS仿QQ好友列表展开、收缩功能(第二篇)

在上篇的基础上继续完善，点击一个li元素，其他li元素上的类名清除掉。

效果图如下所示：

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好友列表展开、收缩功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# js # 仿qq列表展开收缩 # js点击收缩和展开 # JS+CSS实现DIV层的展开、收缩效果 # js实现div层缓慢收缩与展开的方法 # vuejs实现折叠面板展开收缩动画效果 # JS右下角广告窗口代码(可收缩、展开及关闭) # JavaScript设置FieldSet展开与收缩 # JS实现固定在右下角可展开收缩DIV层的方法 # 在iframe里的页面编写js # 实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码） # JS仿QQ好友列表展开、收缩功能(第一篇) # Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件 # JavaScript实现QQ列表展开收缩扩展功能 # javascript使用substring实现的展开与收缩文字功能示例 # 这两个 # 小编 # 每组 # 的是 # 是一个 # 在此 # 基础上 # 可以用 # 把它 # 给大家 # 要用 # 可以使用 # 所示 # 要给 # 好友列表 # 所述 # 换一个 # 给我留言 # 值为 # 要再

返回目录在线咨询

上一篇：解决 Pyrogram 与 g4f 集成中的异步冲突：正确处理事件循环错误
下一篇：闪动创意：Flash网站设计的魅力探索

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JS仿QQ好友列表展开、收缩功能(第二篇)

您的项目需求