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

(0)

相关推荐

  • 原生js实现新闻列表展开/收起全文功能

    知识要点 1.实现原理很简单,通过点击a标签设置div的display属性隐藏或者显示, 主要是对dom操作的掌握. 2.需要用到的dom操作: parentNode 获取父级元素 nextSibling获取下一个紧跟的节点 previousSibling获取上一个紧跟的节点 3.注意事项: 要考虑到当点击展开全文的时候,其他已经展开的全文要收起来. 当用nextSibling获取下一个节点时候,不同浏览器的判断是不一样的 有的是获取元素,有的获取换行符或者空格,所以这里就要用到nodeType

  • Javascript通过overflow控制列表闭合与展开的方法

    本文实例讲述了Javascript通过overflow控制列表闭合与展开的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

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

    效果图如下所示: html: <ul id="list"> <li class="lis"> <h2>我的好友</h2> <ul> <li>张三</li> <li>李四</li> ... </ul> </li> <li class="lis"> <h2>企业好友</h2> <

  • JavaScript实现QQ列表展开收缩扩展功能

    本文实例为大家分享了js实现QQ列表展开收缩扩展展示的具体代码,供大家参考,具体内容如下 效果图: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul,h2{margin:0; padding:0;} li{l

  • 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 arrl

  • Android UI仿QQ好友列表分组悬浮效果

    本文实例为大家分享了Android UI仿QQ好友列表分组悬浮效果的具体代码,供大家参考,具体内容如下 楼主是在平板上測试的.图片略微有点大,大家看看效果就好 接下来贴源代码: PinnedHeaderExpandableListView.java 要注意的是 在 onGroupClick方法中parent.setSelectedGroup(groupPosition)这句代码的作用是点击分组置顶, 我这边不须要这个效果.QQ也没实用到,所以给凝视了.大家假设须要能够解开凝视 package c

  • Android仿QQ好友列表实现列表收缩与展开

    ExpandableListView是一个垂直滚动显示两级列表项的视图,与ListView不同的是,它可以有两层:每一层都能够被独立的展开并显示其子项. 好友QQ列表,可以展开,可以收起,在android中,以往用的比较多的是listview,虽然可以实现列表的展示,但在某些情况下,我们还是希望用到可以分组并实现收缩的列表,那就要用到android的ExpandableListView,今天研究了一下这个的用法,也参考了很多资料动手写了一个小demo,实现了基本的功能,下面直接上效果图以及源代码

  • Android仿QQ好友列表分组实现增删改及持久化

    Android自带的控件ExpandableListView实现了分组列表功能,本案例在此基础上进行优化,为此控件添加增删改分组及子项的功能,以及列表数据的持久化. Demo实现效果: GroupListDemo具体实现: ①demo中将列表页面设计为Fragment页面,方便后期调用:在主界面MainActivity中动态添加GroupListFragment页面: MainActivity.java package com.eric.grouplistdemo; import android

  • vue列表单项展开收缩功能之this.$refs的详解

    展开效果–看红框区域 收缩效果–看红框区域 接下来看代码逻辑 ###template部分:已去除与本文不相关的功能代码 <li class="main-video"v-for="(item, index) of courseSubList" :key="item.id"> <div class="audio-name"> <div class="img-l"> <s

  • android仿微信好友列表功能

    android studio实现微信好友列表功能,注意有一个jar包我没有放上来,请大家到MainActivity中的那个网址里面下载即可,然后把pinyin4j-2.5.0.jar复制粘贴到项目的app/libs文件夹里面,然后clean项目就可以使用了 实现效果图: (1)在build.gradle中引用第三方的类库 compile 'com.android.support:recyclerview-v7:26.0.0-alpha1' compile files('libs/pinyin4j

  • Android仿QQ空间动态界面分享功能

    先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 和 模糊搜索,反复快速滑动仍然非常流畅. 缓存机制使得数据可在启动界面后瞬间加载完成. 动态详情界面MomentActivity支持 (取消)点赞.(删除)评论.点击姓名跳到个人详情 等. 只有1张图片时图片放大显示,超过1张则按九宫格显示. 用到的CommentContainerView和Mom

  • 使用qt quick-ListView仿微信好友列表和聊天列表的示例代码

    1.视图模型介绍 在Qml中.常见的View视图有: ListView: 列表视图,视图中数据来自ListModel.XmlListModel或c++中继承自QAbstractItemModel或QAbstractListModel的自定义模型类 TableView: 和excel类似的视图 GridView: 网格视图,类似于home菜单那样,排列着一个个app小图标 PathView: 路径视图,可以根据用户自定义的path路径来显示不一样的视图效果 SwipeView: 滑动视图,使用一组

随机推荐