html仿qq最小化怎么实现,JS仿QQ好友列表展开、收缩功能(第一篇)

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

发布时间:2020-10-17 14:20:03

来源:脚本之家

阅读:96

作者:erdouzhang

效果图如下所示:

f68f1f8d85568df78ff912c5d641bb5f.gif

html:

  • 我的好友

    • 张三
    • 李四

    ...

企业好友

  • 小明
  • 小红

...

黑名单

  • 哈哈

...

css:

ul,h3 {padding: 0;margin: 0;}

li {list-style: none;}

#list {

width: 240px;

border: 1px solid #ccc;

margin: 0 auto;

}

#list .lis { }

#list h3 {

height: 30px;

line-height: 30px;

text-indent: 20px;/*文字缩进20px*/

background: url(img/ico1.gif) no-repeat 5px center pink;/*前面小箭头*/

cursor: pointer;

}

#list .active { /* 点击时添加的类名 */

background: url(img/ico2.gif) no-repeat 5px center #ff9;

}

#list ul {display: none;}

#list ul li {

line-height: 24px;

border-bottom: 2px solid #fc4;

text-indent: 24px;/*文字缩进24px*/

}

js:

window.onload = function(){

var list = document.getElementById('list');

var ah3 = list.getElementsByTagName('h3');

var uls = list.getElementsByTagName('ul');

// h3要和下面的ul进行匹配,所以我们要用索引值,给h3身上添加索引值

for(var i=0;i

ah3[i].index = i;//给h3添加索引值,点击谁就给谁添加索引值

ah3[i].onclick = function(){

if(this.className == ''){//判断所点击的h3标签是否有类,

//this.index指h3身上的索引数,this指h3,h3的索引值为this.index

uls[this.index].style.display = 'block';

this.className = 'active';//给当前点击的h3添加类,更改箭头方向

}else{

uls[this.index].style.display = 'none';

this.className = '';

}

}

}

}

下篇给大家介绍:JS仿QQ好友列表展开、收缩功能(第二篇)

以上所述是小编给大家介绍的JS仿QQ好友列表展开、收缩功能(第一篇),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/432763.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Visual Studio 选择相同变量高亮

前段时间一直在使用matlab,今天需要使用vs2008,而用惯了matlab,习惯了其中一项选中变量高亮的设置,突然回来使用VS,感到各种不适应,顿时想到了一个词:矫情 呵呵,于是在网上找各种插件…

V210调整根分区大小

1. 修改uboot common/mmc_cmd_fdisk.c #define SYSTEM_PART_SIZE (120*1024*1024) 将120改成256 2. 在dd文件系统的时候,增大count dd if/dev/zero ofrootfs_qt4.ext3 bs1024 count262144 重烧系统的时候,需要先烧入uboot,然后重启再烧入…

html中怎么写jq,用jQuery替换HTML页面中的文本

如何替换jQuery中的任何字符串?假设我有一个字符串"-9o0-9909",我想用另一个字符串替换它。在问问题之前如何使用jQuery将HTML块替换为HTML块的可能重复,最好检查一下系统在输入问题标题时提出的自动建议您能否详细说明为什么您认为…

asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报错,已解决!)...

asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报错,已解决!) 原文:asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报…

Qt中translate、tr关系 与中文问题

Qt中translate、tr关系 与中文问题2010-09-22 00:15题外话:何时使用 tr ? 在论坛中漂,经常遇到有人遇到tr相关的问题。用tr的有两类人: (1)因为发现中文老出问题,然后搜索,发现很多人用tr,于是他…

html打印边距影响内容大小,关于web打印的问题,如何控制纸张大小和页边距

关于这个问题我上网查了很多资料,最后参照一个资料。编写了下面内容:但是根本达不到要求,哪位大侠有真正使用的经验?告诉我到底应该怎样弄?求一个真正使用的方法,谢谢!再就是这一行在visual stu…

win32控制台

可回显的调用方法: 这个方法步骤比较复杂,是通过创建一个新进程来模拟cmd命令行,将写命令行和回显通过管道的方式呈现。 例如: view plain 1. void CTestMFCDlg::OnOK() 2. { 3. // TODO: Add extra validation …

html是前段还是后端,javascript属于前端还是后端?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。前端开发和后端开发的区别在于&#xff1a…

ubuntu12.04中shell脚本无法使用source的原因及解决方法

现象: shell脚本中source aaa.sh时提示 source: not found 原因: ls -l which sh 提示/bin/sh -> dash 这说明是用dash来进行解析的。 改回方法: 命令行执行:sudo dpkg-reconfigure dash 在界面中选择no 再ls -l which sh 提…

2021年河北省高考成绩录取查询结果,2021年河北高考一本录取结果查询和录取通知书发放时间...

河北高考一本录取结果查询和录取通知书发放时间从河北教育考试院获悉,河北高考成绩查询时间已经确定。同时,考生、家长关心的各批次录取时间也已出炉。其中,本科一批高等学校录取时间安排如下:本科一批第一志愿录取结束时间为7月1…

viewgroup 渲染过程

参考 http://blog.csdn.net/luoshengyang/article/details/8372924 总体步骤 performTraversals-->measure---->layout----->draw 测量布局渲染 1.measure 测量过程 例子:FrameLayout measure 测量开始判读是否需要测量 onMeasure 求实际宽度 measureChi…

C++读取ini文件的类

C读取ini文件的类 取自:http://www.viksoe.dk/code/all_mfc.htm,里面有各种MFC常用的类 // Ini.h: interface for the CIni class. // // Written by Bjarke Viksoe (bjarkeviksoe.dk) // Copyright (c) 2000. // // This code may be used in compiled …

A20(emmc) 编译环境

1. 需要物理内存3G,或者调高虚拟内存,否则编译会报错(killed) 2. 安装jdk 3. apt-get install bison apt-get install flex apt-get install gperf apt-get install libswitch-perl apt-get install libxml2-utils

Linux查看设置系统时区

关于时区的概念,其实初中地理课已经涉及,很多人都多少了解一些,可能只是细节搞不太清楚。为什么会将地球分为不同时区呢?因为地球总是自西向东自转,东边总比西边先看到太阳,东边的时间也总比西边的早。东边…

SQL基础问题整理

在程序中,数据库操作是必不可少的部分,所以我们要备足数据库相关知识才能去应付程序中出现的种种问题。基于此,我特地在国外网站、博客上整理了一些问题,并附带了答案和解释、参考。为了保证“原汁原味”,我就保留了英…

计算机突然从桌面消失了,电脑桌面突然什么都没有了,怎么处理

★桌面-点击鼠标右键-点击排列图标-点击显示桌面图标★在桌面上右键点击→“属性”→桌面项→左下有个“自定义桌面”进入设置,把你需要的桌面项目打上勾,然后确定就行了。★先按ctrlaltdel三键打开任务管理器&#xf…

V210 时区

V210默认时区是格林尼治时间,只要把ubuntu的/etc/localtime文件拷贝到板子上就可以了 用date -R可以看到时区是否正确

腾讯或联姻优酷,微信嫁女模式引发互联网通婚潮流

据消息称:腾讯在前段时间联姻京东后有可能继续做甩手掌柜,这回要甩的是腾讯视频。 前几年,最火爆的电商业务除了电商外,再者一个就是视频业务了。 不知道大家还记得优酷当时的崛起之初的情景么?我来罗列一下: 1、 大…

微型计算机键盘上的西服的间称为,一台完整的微型计算机主要由主机箱. .键盘.鼠标及音箱.打印机组成....

阅读下面的文字,完成后面题目。(25分)“博客之父”方兴东(节选)打开百度,输入“方兴东’’搜索,100多万条信息赫然呈现。罩在方兴东头上的光环颇多:清华大学博士、专栏作家、互联网评论家……而“中国博客之父”的称号&#xff0c…

mplayer

mplayer -af volume20 *.mp3 经测试,volume在-50和50这个区间就可以了,0最佳,超过0就爆音