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匹配，所以我们应该将(var i=0)的索引值添加到具有索引值的h2中；iah2.lengthi ){ ah2[i]。索引=I；//给h2加上索引值，再加上索引值ah2 [I]。onclick=function () {if (this。class name=' '){//判断被点击的h2标签是否有类。//this.index指h2上的索引号，这个指h2，h2的索引值就是这个。index uls[这个。this.className=' active//向当前单击的h2添加一个类，并更改箭头方向} else {uls [this。索引]。风格。显示='无'；this.className=} } }//查找列表中的所有ULs，有三个ULs，所以使用for循环for(var I=0；iuls.lengthI ){//找到每组ullis=uls [I]。getelementsbytagname(' Li ')；//在uls中找到所有li元素，并将其存储在lis中。为什么要救他们？因为找到的li元素是一组元素，所以应该向每个元素添加click事件，并在保存后再次执行for循环。for集中没有包装函数，所以必须为(var j=0；jlis.lengthJ ){//在每组ul中查找所有Li arrli . push(lis[j])；//把每一个li放在数组中，因为需要对一个组中的每一个li进行操作，所以我们把它拿出来放在一起便于操作} }//找到每一个li后，对(var I=0；iarrli.length我)。onclick=function(){//清除所有类名，只添加当前点击的一个li元素。//为什么用我？因为它们之间有一层函数(当包含函数时，作用域已经改变)，所以您可以对(var I=0；iarrli.lengthi ){ arrli[i]。className=//移除所有添加的类} this.className=' hover//将类名添加到当前单击的li元素中} } }/脚本注意：

如何区分for循环中的一些I和一些J？

答：(1)如果是for循环，可以用I或者J，一般是I(2)如果两个for是嵌套的，看两个for之间是否有函数分隔：1。如果有分离的函数，两个for循环中的变量可以使用I. 2。没有函数分离，两个for循环中的变量不能用同一个I，一个I和一个j来命名.

例1:

下面两个嵌套的for循环没有被函数分开，所以一个是I，另一个是j .

for(var I=0；iuls.lengthI ){//找到每组ullis=uls [I]。getelementsbytagname(' Li ')；for(var j=0；jlis.lengthJ ){//在每组ul中查找所有Li arrli . push(lis[j])；}}示例2:

它也是两个嵌套的循环，用一个函数隔开，所以你可以用同一个I来命名它们。

for(var I=0；iarrli.lengthi ){ arrli[i]。onclick=function(){ for(var I=0；iarrli.lengthi ){ arrli[i]。className=//移除所有添加的类} this.className=' hover//给当前点击的li元素添加类名}}以上是边肖介绍的JS模仿QQ好友列表的伸缩功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！