<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        ul {

            list-style-type: none;

        }

        .header {

            background-color: red;

            cursor: pointer;

        }

        .body {

            background-color: greenyellow;

            border-style: solid;

            border-width: 1px;

        }

    </style>

    <script src="../Scripts/jquery-1.8.2.js"></script>

    <script type="text/javascript">

        $(function() {

            $("#qq li[name=grp]").addClass("header").click(function () {

                $(this).nextUntil("li[name=grp]").show("slow");

                $(this).siblings("li[name=grp]").nextUntil("li[name=grp]").hide("slow");

            });

            $("#qq li:not([name=grp])").addClass("body");

            $("#qq li:frist").click();

        });

    </script>

</head>

<body>

    <ul id="qq">

        <li name="grp">我的好友</li>

        <li >张三</li><li>李四</li>

        <li name="grp">我的同学</li>

        <li>赵三</li><li>同学2</li>

        <li name="grp">陌生人</li>

        <li>陌生人1</li><li>陌生人2</li><li>陌生人3</li>

    </ul>

</body>

</html>

效果图：

js仿qq分组折叠效果的更多相关文章

  1. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  2. 实现类似QQ的折叠效果

    //  主要核心是点击自定义header来展开和收起每一组里面的cell,模型里面应该有isShow此属性来记录开展还是收起. //  ViewController.m//  实现类似QQ的折叠效果/ ...

  3. js仿QQ拖拽删除

    原生js实现仿QQ拖拽删除交互,无需任何依赖. 项目演示请看这里, gitHub请移步这里. 由于源码很长,所以贴到最下面了. 效果截图如下: 核心思想呢,就是点击圆点的时候全屏覆盖个canvas,在 ...

  4. android采用MVP完整漫画APP、钉钉地图效果、功能完善的音乐播放器、仿QQ动态登录效果、触手app主页等源码

    Android精选源码 一个可以上拉下滑的Ui效果,觉得好看可以学学 APP登陆页面适配 一款采用MVP的的完整漫画APP源码 android实现钉钉地图效果源码 一个使用单个文字生成壁纸图片的app ...

  5. Android仿QQ复制昵称效果

    本文同步自http://javaexception.com/archives/76 背景: 这几天做一个复制文本的需求,突然看到QQ上复制昵称跟QQ号的效果,觉得很不错,就想要模仿一波,办法比较简单粗 ...

  6. JS仿Android Toast提示效果

    注:这个需要jquery文件来提示支持,所以需要先调用Jquery. <script type="text/javascript" src="js/jquery.j ...

  7. Android仿QQ复制昵称效果2

    本文同步自http://javaexception.com/archives/77 背景: 在上一篇文章中,给出了一种复制QQ效果的方案,今天就来讲讲换一种方式实现.主要依赖的是一个开源项目https ...

  8. 高仿QQ、微信效果的图片浏览器（支持原图和缩略图、多种手势、CocoaPods）

    感谢原文作者的分享 本文转载至 http://my.oschina.net/u/2406027/blog/735738 PYPhotoBrowser GitHub地址:https://github.c ...

  9. Js仿腾讯微博效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. JS脚本-零星片段

    1.这种写法:(function(){})(),同时注意:原生的异步对象的兼容性实例化方法 <script> document.domain = "qq.com"; x ...

  2. Python开发——【循环】语句

    while循环 while 条件: # 要执行的循环体 # 如果条件为真,那么循环体则执行 # 如果条件为假,那么循环体不执行 死循环 count = 0 while True:# 条件永远为真 pr ...

  3. Docker架构

    Docker使用客户端-服务器(C/S)架构模式,使用远程API来管理和创建Docker容器. Docker容器通过Docker镜像来创建. 容器与镜像的关系类似于面向对象编程中的对象和类. Dock ...

  4. C#实现局部峰值查找,功能对应Matlab中的findpeaks.m（转）

    相关算法的原理参考Ronny,地址:图像分析:投影曲线的波峰查找,这里感谢下原作者. 参照C++的代码实现,我用C#翻译了下,其实原理也很简单的,下面放相关实现代码: private double[] ...

  5. IJ配置项目的TOMCAT

    参考文档: IJ里配置TOMCAT http://jingyan.baidu.com/album/0a52e3f43d9f69bf62ed72f9.html?picindex=11 源发行版1.8 需 ...

  6. SPOJ - AMR11B

    题目链接:https://www.spoj.com/problems/AMR11B/en/ 题目大意就是要你求图形覆盖的格点数,标记每个图形里的未标记格点(包括边界),总标记数就是覆盖的总格点数. # ...

  7. 深入理解JVM(六)类文件结构

    6.1 关于类文件 1.class文件的一次编译,到处运行的跨平台性: 2.JVM不止有跨平台性,还有跨语言性,不管是JRuby还是Groovy写出来的程序,只要编译出符合JVM规范的class文件就 ...

  8. 结合OPENSIFT源码详解SIFT算法

    平台:win10 x64 +VS 2015专业版 +opencv-2.4.11 + gtk_-bundle_2.24.10_win32 参考博客:https://www.cnblogs.com/cql ...

  9. 加盟阿里！贾扬清被曝从Facebook离职，任阿里硅谷研究院VP

    3 月 2 日傍晚,知乎上爆出一则 AI 人事变动大消息——Caffe 作者贾扬清将从 Facebook 离职. 短短数小时,就有近 10 万人浏览这个问题.不仅如此,据 AI 前线爆料,贾扬清离开 ...

  10. lwip-动态内存管理

    动态内存管理涉及两类重要函数,内存分配函数,内存释放函数,如C语言中的malloc和free. 内存分配的本质是:在事先准好一大块内存堆(可以理解为一个很大的数组)中分配合适的空间,然后将该空间起始地 ...