js仿qq分组折叠效果
2016-02-06 00:22
726 查看
<!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>
效果图:
![](http://images2015.cnblogs.com/blog/429277/201602/429277-20160206001938897-1588393596.png)
相关文章推荐
- 浅析Javascript匿名函数与自执行函数
- JavaScript仿商城实现图片广告轮播实例代码
- javascript+css3 实现动态按钮菜单特效
- 基于JavaScript实现图片点击弹出窗口而不是保存
- 深入浅析JavaScript面向对象和原型函数
- Meteorjs学习笔记
- JavaScript的this分别代表什么
- 理解javascript中所有的函数参数是按值传递
- 为什么直接把javascript的代码写进html就行但是调用js文件就不行
- knockoutjs四 foreach的绑定
- JavaWeb将数据包装成JSON以及JSP通过ajax对JSON的获取与解析(代码实例)
- JS小Demo实战之今天外卖点什么?(三)
- Javascript的匿名函数与自执行
- eval解析JSON注意点
- js字符串方法(总结)
- 字符串的长度 -- js
- JavaScript面向对象:分页器类封装
- JavaScript面向对象的设计原则(二)
- css3 javascript 实现菜单按钮特效
- js事件处理 —— 详解