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{list-style-type:none;}
#list{margin:0 auto; border:#333 solid 1px; width:250px;}
#list h2 {background: url(../img/ico1.gif) no-repeat 5px 14px #0C6; text-indent:20px; height:32px; line-height:32px;}
#list ul li{text-indent:25px; border-bottom:#333 solid 1px; line-height:24px; height:23px; }
#list .active{background: url(../img/ico2.gif) no-repeat 5px 14px #693; text-indent:20px; height:30px; line-height:30px;}
#list ul{display:none;}
.hover{background:#CFC;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById("list");
var aUl =oUl.getElementsByTagName("ul");
var aH2 = oUl.getElementsByTagName("h2");
var aLi = null;
var arrLi = [];
var that = null;
for(i=0;i<aH2.length;i++){
 aH2[i].index = i;
 aH2[i].onclick = function(){
 if(this.className==''){
 for(i=0;i<aH2.length;i++){
aH2[i].className='';
aUl[i].style.display='none';
 }
this.className='active';
aUl[this.index].style.display = 'block';
}else{
this.className='';
aUl[this.index].style.display='none';
 }
             }
 }
for(i=0;i<aUl.length;i++){
  aLi =aUl[i].getElementsByTagName("li");
 for(j=0;j<aLi.length;j++){
  arrLi.push(aLi[j]);
 }
}
for(var i=0;i<arrLi.length;i++){
 arrLi[i].onclick = function(){
  for(i=0; i<arrLi.length;i++){
arrLi[i].className='';
 }
this.className = 'hover';
}
}

};
</script>
</head>

<body>
<ul id="list">
<li class="lis">
  <h2>我的好友</h2>
  <ul>
  <li>张三</li>
   <li>张四</li>
   <li>张五</li>
   <li>张六</li>
  </ul>
 </li>
 <li class="lis">
 <h2>企业好友</h2>
  <ul>
  <li>李四</li>
   <li>李小四</li>
   <li>李四二</li>
   <li>李毅</li>
   <li>李二</li>
  </ul>
 </li>
 <li class="lis">
 <h2>黑名单</h2>
  <ul>
  <li>张三</li>
  <li>李四</li>
  </ul>
 </li>
</ul>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

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

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

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

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

    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

  • 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

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

    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

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

    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

  • JS实现固定在右下角可展开收缩DIV层的方法

    本文实例讲述了JS实现固定在右下角可展开收缩DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

  • vuejs实现折叠面板展开收缩动画效果

    vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画. 循环列表,html: <template> <div class="newslist"> <ul> <li v-for="(item,index) in newslist" :key="index"> <p class="p" ref="liCon">{{i

  • 微信小程序实现通讯录列表展开收起

    微信小程序实现通讯录列表展开收起

    本文实例为大家分享了微信小程序实现通讯录列表展开收起的具体代码,供大家参考,具体内容如下 效果图: wxml: <view class="mail_content kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}"> <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}"> <

  • jQuery 淡入淡出、展开收缩菜单实现代码

    jQuery 淡入淡出、展开收缩菜单实现代码

    效果图:运行以后,刷新下即可. jQuery淡入淡出.展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bo

  • 基于JavaScript实现评论框展开和隐藏功能

    基于JavaScript实现评论框展开和隐藏功能

    1.效果图如下所示, 点击评论会在对应的评论区域展开评论输入框,点击取消会取消对应的评论输入框 2.html代码:需要引入jQuery.js <div class="nr-comment"> <div class="nr-comment-con"> <div class="nr-comment-nav"> <div class="comment-number"> <span

  • JavaScript节点及列表操作实例小结

    JavaScript节点及列表操作实例小结

    本文实例总结了JavaScript节点及列表操作的方法.分享给大家供大家参考.具体如下: (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 (2)添加.移除.替换.插入 appendChild() removeChild() replaceChild() insertBefore() (3)查找 getElementsByTagName() /

随机推荐