CSS+Jquery实现QQ分组列表
实现效果图如下：
说明：
1、css隐藏分组下的好友内容；
2、Jquery实现点击分组项事件，实现好友内容的显示和隐藏；
3、样式1，可展开多个分组；样式2，只能有一个分组展开；
源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.contact-ul{margin-top:10px;font-size:14px;}
.contact-ul>.contact-li{
text-align: left;
border-bottom: 1px solid #E0E0E0;
padding:10px;
}
.contact-ul>.contact-li:hover{
cursor:pointer;
}
.contact-ul>.contact-li:last-child{border-bottom:0px;width:100%;}
.contact-ul>.contact-li>.contact-content{
display: none;
}
.fa-box{width:100%;overflow-y:auto;position:absolute;bottom:60px;top:50px;}
.fa-box-item{
width:100%;
padding-left:10px;
padding-top:5px;
padding-bottom:5px;
background:white;
border-bottom:1px solid rgba(160,160,160,.3);
overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.fa-box-item:hover{
cursor:pointer;
}
.fa-box-item:last-child{border-bottom:0px;}
.fa-box-item-left{width:40px;height:40px;float:left;background:pink;border-radius:50%;position:relative;}
.fa-box-item-right{height:40px;max-width:65%;float:left;padding-left:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.fa-color-red{color:rgba(200,0,0,.8);}
</style>
<script type="text/javascript">
$(function(){
$("#contact-ul>.contact-li>.contact-group").click(function(){
if($(this).find("i").hasClass("fa-angle-down")){
/**设置当前选中图标**/
$(this).find("i").removeClass("fa-angle-down");
$(this).find("i").addClass("fa-angle-up");
/**样式1：只关注当前项**/
$(this).nextAll().slideDown();
/**样式2：设置显示当前内容，其他组内容隐藏，未选中图标**/
//$(this).nextAll().slideDown().end().parent().siblings().children(".contact-content").hide();
//$(this).parent().siblings().children("div").children("i").removeClass("fa-angle-up").addClass("fa-angle-down");
}else{
/**设置当前取消选中图标**/
$(this).find("i").removeClass("fa-angle-up");
$(this).find("i").addClass("fa-angle-down");
/**样式1：只关注当前项**/
$(this).nextAll().slideUp();
/**样式2：设置所有内容隐藏，未选中图标**/
//$(this).nextAll().slideUp().end().parent().siblings().children(".contact-content").hide();
//$(this).parent().siblings().children("div").children("i").removeClass("fa-angle-up").addClass("fa-angle-down");;
}
});
}); </script>
</head>
<body>
<div class="contact-ul" id="contact-ul">
<div class="contact-li">
<div class="contact-group"> <i class="fa fa-angle-down"></i> 好友</div>
<div class="contact-content">
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
</div>
</div>
<div class="contact-li">
<div class="contact-group"> <i class="fa fa-angle-down"></i> 好友2</div>
<div class="contact-content">
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
</div>
</div>
<div class="contact-li">
<div class="contact-group"> <i class="fa fa-angle-down"></i> 好友3</div>
<div class="contact-content">
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
</div>
</div>
<div class="contact-li">
<div class="contact-group"> <i class="fa fa-angle-down"></i> 好友4</div>
<div class="contact-content">
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
<div class="fa-box-item">
<div class="fa-box-item-left"></div>
<div class="fa-box-item-right">王三 <span class="fa-size-xxs">在线</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div>
</div>
</div>
</div>
</div> </div> </body>
</html>
CSS+Jquery实现QQ分组列表的更多相关文章
- Android ExpandableListView BaseExpandableListAdapter (类似QQ分组列表）
分组列表视图(ExpandableListView) 和ListView不同的是它是一个两级的滚动列表视图,每一个组可以展开,显示一些子项,类似于QQ列表,这些项目来至于ExpandableListA ...
- QQ分组显示列表ExpandableListView组件应用源码
ExpandableListView又称为可扩展的ListView组件,他和ListView组件很相似 不过每行的显示有两个xml文件,一个xml文件用于定义分组列表的显示风格, 还有一个xml文件用 ...
- js高仿QQ消息列表左滑功能
该组件,主要功能类似于QQ消息列表左滑出现删除.标为已读等按钮的功能:现在的版本用的是纯javaScript编写:后续会跟进 angularJs 开发的类似组件以及jquery的; 下面,就让我们来认 ...
- iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（一）
iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...
- [iOS基础控件 - 6.9.3] QQ好友列表Demo TableView
A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组 code so ...
- Web版RSS阅读器（二）——使用dTree树形加载rss订阅分组列表
在上一边博客<Web版RSS阅读器(一)——dom4j读取xml(opml)文件>中已经讲过如何读取rss订阅文件了.这次就把订阅的文件读取到页面上,使用树形结构进行加载显示. 不打算使用 ...
- WPF 自定义TreeView控件样式，仿QQ联系人列表
一.前言 TreeView控件在项目中使用比较频繁,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeVi ...
- ExpandableListView仿QQ好友列表
本例中,对ExpandableListView中的数据进行了封装,分为两个JavaBean,一个为Group类表示组信息,一个Child类表示该组下子列表信息: Group: public class ...
- 基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="m ...
随机推荐
- 转载：如何使用RFT自动打开IE
如何在RFT测试脚本中打开IE浏览器? 第一步,配置应用程序进行测试: “配置”菜单 ——> “配置应用程序进行测试...”,进入下面这个界面,默认三个自带的应用程序,点击“添加”加入IE. ...
- QML中使用相对路径
QML里有三种路径: 默认使用URL路径. "qrc:///filepath".这用来索引资源文件. "file:///绝对路径".这用来索引本地文件系统中的文 ...
- 重构31-Replace conditional with Polymorphism（多态代替条件）
多态(Polymorphism)是面向对象编程的基本概念之一.在这里,是指在进行类型检查和执行某些类型操作时,最好将算法封装在类中,并且使用多态来对代码中的调用进行抽象. public class O ...
- [Windows Server 2008] 阿里云.云主机忘记密码解决方法
★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com ★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频. ★ 本节我们将带领大家:解决阿里云 ...
- vb，wps，excel 提取括号的数字
Sub 抽离数字() Dim hang Range("h1").Select Columns("E:F").Select Selection.Clear Ran ...
- 田字格布局html div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 【译】x86程序员手册33-9.6中断任务和中断处理程序
9.6 Interrupt Tasks and Interrupt Procedures 中断任务和中断处理程序 Just as a CALL instruction can call either ...
- codeforces_1066_B.Heaters
题意:一个数组只含有0或1,1表示该元素可以覆盖其自身.左边r-1个元素和右边r-1个元素,问最少保留多少个1元素可以覆盖整个数组. 思路:一个指针指向当前未被覆盖的最左边的元素下标,每次找离它最远且 ...
- 初始化react项目
react脚手架 npm install -g create-react-app 国内npm一般下载比较慢或者是常出现下载失败的情况,我们可以指定下载的仓库: npm install -g creat ...
- bash基础——管道符、通配符
1.多命令顺序执行 多命令顺序执行 格式 作用 ; 命令1 ; 命令2 多个命令之间没有任何逻辑联系 && 命令1&&命令2 逻辑与 当命令1正确执行,则命令2才会执行 ...