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 ...

随机推荐

了解java内存回收机制-博客导读
此文作为读优质博客前的导读文 1.如何判断对象是否该回收该对象是否被引用,是否处于不可达状态 2.对象的引用机制强引用.软引用.弱引用.虚引用 3.垃圾回收机制如何回收.算法. 串行回收.并行回收 ...
掌握Spark机器学习库-02-mllib数据格式
MLlib 1.MLlib介绍 1)MLlib特点 2)哪些算法 3)阅读官方文档 MLlib提供了哪些: 算法特征工程管道持久化 2.MLlib数据格式 1)本地向量 2)标签数据 3)本地矩 ...
Jenkins .NET项目持续集成配置
基本步骤 1. 安装并配置MSBUILD 在系统管理->插件管理->添加MSBuild插件在系统管理->系统设置->找到MSBuild配置部分,配置不同的MSbuild版本 ...
Node.js——异步上传文件
前台代码 submit() { var file = this.$refs.fileUpload.files[0]; var formData = new FormData(); formData.a ...
（一）Redis for Windows正确打开方式
目录 (一)Redis for Windows正确打开方式 (二)Redis for 阿里云公网连接 (三)Redis for StackExchange.Redis 下载地址官网.中文网1 及中 ...
iView webapp / Mint UI / MUI [前端UI]
前端UI iView webapp一套高质量的微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 ...
ARP是如何工作的？
我们知道,当我们在浏览器里面输入网址时,DNS服务器会自动把它解析为IP地址,浏览器实际上查找的是IP地址而不是网址.那么IP地址是如何转换为第二层物理地址(即MAC地址)的呢? 在局域网中,这是通过 ...
Java核心技术卷1 第三章
1. Java区分大小写,下一段源代码中,关键字public称为访问修饰符,用于控制程序的其他部分对于这段代码的访问级别,关键字class表明Java程序中的全部内容都包含在类里面. 标准的类名命名规 ...
HDU1401 Solitaire
题目描述:8×8的棋盘上有4个棋子,棋子的运动方法如下:1.如果其上/下/左/右一格没有棋子,则可以去;2.如果其上/下/左/右一格有棋子,而且沿原方向再跳一步没有,则可以去. 给出初始结束位置,问8 ...
Dash Speed
题目大意: 比特山是比特镇的飙车圣地.在比特山上一共有n 个广场,编号依次为1 到n,这些广场之间通过n - 1 条双向车道直接或间接地连接在一起,形成了一棵树的结构.因为每条车道的修建时间以及建筑材 ...

CSS+Jquery实现QQ分组列表

CSS+Jquery实现QQ分组列表的更多相关文章

随机推荐

热门专题