QQ列表展开收缩扩展（自定义属性，索引值练习）

最新推荐文章于 2018-04-25 10:50:10 发布
最新推荐文章于 2018-04-25 10:50:10 发布
阅读量618 收藏
点赞数
分类专栏： 学习记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whoops_butterfly/article/details/78390724
版权

<!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/xhtml">
<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
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
扩展访问控制列表配置
逐梦的博客
03-12 1万+
知识点： 简介： 访问控制列表（Access Control List，ACL） 是路由器和交换机接口的指令列表，用来控制端口进出的数据包。ACL适用于所有的被路由协议（被路由协议是一些用于定义数据报内字段格式并且为用户的通讯传输提供一种机制的协议（也就是打包），如IP、IPX、AppleTalk等。路由协议则负责运输。例如ospf、IGRP） 功能： 配置ACL后，可以限制网络流...
android 实现QQ好友列表（扩展listview:ExpandableListView）
热门推荐
zhouyuanjing的专栏
12-04 1万+
在某些android开发群里，看到有些新手问怎么实现QQ好友列表，其实网上一搜挺多的。接触Android，也才一年的时间，大部分时间花在工作上（解bug。。。），界面上开发很少参与。自己维护的系统应用里，有个ExpandableListView的界面（其实android例子APIDemo也有类似的例子）就在这里写个Demo供新手参考。         ExpandableListView的用法：
android开发 类似qq的可扩展下拉列表
10-17
实现类似qq的可扩展下拉列表，要的就拿去吧
第3课--3.1QQ列表展开收缩扩展
wcf1991的博客
10-27 241
QQ列表展开收缩扩展 body,ul,p{ padding:0; margin:0; } body{ background-color:#666; } li{ list-style:none; } #wrap{ width:300px; height:400px; margin:30px auto; } #w
扩展listview，仿QQ好友列表
04-29
这个demo是一个扩展的listview，仿QQ好友列表，可以添加人员，添加之后显示在对应的列表之下！
JavaScript实现QQ列表展开收缩扩展功能
10-19
主要为大家详细介绍了JavaScript实现QQ列表展开收缩扩展功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android仿QQ好友列表实现列表收缩与展开
09-02
主要介绍了Android仿QQ好友列表实现列表收缩与展开，感兴趣的小伙伴们可以参考一下
JS仿QQ好友列表展开、收缩功能(第二篇)
10-19
主要介绍了JS仿QQ好友列表展开、收缩功能,当点击一个li元素，其他li元素上的类名清除掉。代码简单易懂，需要的朋友可以参考下
JS仿QQ好友列表展开、收缩功能(第一篇)
10-19
主要介绍了JS仿QQ好友列表展开、收缩功能(第一篇),需要的朋友可以参考下
一个伸缩形的网页菜单，竖着排列，点一级主菜单会展开所属的二级菜单，再次点击就合拢了...
世范水晶
07-10 382
&lt;%@ page language="java" contentType="text/html"    pageEncoding="utf-8"%&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;伸缩形的菜单&lt;/title&gt;&lt;/head&gt; &lt;body&gt; &amp
Unity编辑器拓展之二：ReorderableList可重新排序的列表框（复杂使用）
静风霁
09-02 6143
Unity编辑器拓展之二：ReorderableList可重新排序的列表框（复杂使用）
05.实例篇：仿QQ好友列表——ExpandableListView可扩展列表的使用（上篇）
壹零Boy-MePlusPlus(米加加)的博客
05-22 2229
1.qian ListView类控件在APP中经常使用，本文主要介绍ExpandableListView，完成两级列表显示的效果    这一节（上篇、下篇）主要介绍如何仿照QQ，以及ListView和ExpandableListView的主要知识点，实现一个好友列表（静态的数据，下一节介绍如何网络上动态获取数据）； 2.实现效果如下：    实现要点：在于如何布局ChildView
仿QQ列表展开、收缩(2完善)
erdouzhang
07-07 802
在上篇的基础上继续完善，点击一个li元素，其他li元素上的类名清除掉。 js：<script> window.onload = function(){ var list = document.getElementById('list'); var ah2 = list.getElementsByTagName('h2');
模拟QQ列表展开收缩
湘中小霸王的博客
12-01 230
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul,li,h4 { margin: 0; padding: 0 ; list-style: none;
扩展IP访问控制列表
weixin_33863087的博客
07-22 408
扩展IP访问控制列表配置技术原理：访问控制列表定义的典型规则主要有以下：源地址、目标地址、上层协议、时间区域；扩展IP访问列表（编号100-199、2000-2699）使用以上四种组合来进行转发或者阻断分组；可以根据数据包的源IP、目的IP、原端口、目的端口、协议来定义规则，进行数据包的过滤。扩展IP访问列表的配置包括以下两个部分：定义扩展IP访问列表将扩展IP访问列表应用于...
用HTML写一首诗
whoops_butterfly的博客
04-16 1万+
用HTML写一首诗 #poem{ width: 300px; height: 200px; margin: 0 auto; text-align: center; color: green; font-size: 20px; } body{ background
html写卡片
whoops_butterfly的博客
04-18 2628
#card{ border: 8px outset black; width: 355px; height: 480px; background-image: url(../图片/芈月.png); margin: 0px auto; padding: 1px 1px; } #
JS使用[]或.来访问对象属性
whoops_butterfly的博客
04-25 1520
属性是一个变量，用来表示一个对象的特征(height/width/color...)；方法是一个函数，用来表示对象的操作。在JavaScript中，有两种方法访问对象的属性"."和"[ ]"。1、使用"."  "[ ]"访问对象属性      1&gt; "."            oBtn.style.width       2&gt; "[ ]"           
vue3 获取自定义组件某个属性值集合
最新发布
05-13
在 Vue3 中，可以通过 `refs` 来获取自定义组件实例，然后访问组件的属性值。具体操作如下： 1. 在自定义组件中定义需要获取的属性值，并通过 `setup()` 函数返回。 ```vue import MyCustomComponent ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值