jQuery选择器之动态列表显示Demo
显示效果:
之后全部展开:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态列表效果.html</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<!-- 引入jQuery var $li = $("li:gt(5):not(':last')");-->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//window.onload ==
$(document).ready(function(){
var $li=$("ul>li:gt(5):not(':last')");
$li.hide();
$("a>span").click(function(){
// if($li.is(":hidden")){
// $li.show(3000);
// $("a>span").html("精简显示");
// }else{
// $li.hide(3000);
// $("a>span").html("显示全部品牌");
// }
// /切换...
// 如果元素为隐藏的状态，调用toggle 方法，会默认显示，如果元素为显示的状态，调用toggle 方法，默认隐藏...
$li.toggle(3000);
})
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul >
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="javascript:void(0);"><span>显示全部品牌</span></a>
</div>
</div>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>
jQuery选择器之动态列表显示Demo的更多相关文章
- jQuery选择器之基本选择器Demo
测试代码: 01-基本选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery选择器之属性选择器Demo
测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery选择器之层次选择器Demo
测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery选择器之内容过滤选择器Demo
测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- jQuery选择器之基本过滤选择器Demo
测试代码: 03-基本过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- jQuery选择器之表单选择器Demo
测试代码: 09-表单选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery选择器之表单对象属性过滤选择器Demo
测试代码: 08-表单对象属性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- jQuery选择器之子元素过滤选择器Demo
测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- jQuery选择器之可见性过滤选择器Demo
测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
随机推荐
- CDocument类的UpdateAllViews()成员函数
(一)UpdateAllViews() 与 Invalidate()的区别 UpdateAllViews()是在DOC/VIEW结构中,当一个视图的数据改变后,通知所有视图作相应的改变,和重画毫无关系 ...
- 组合View Controller时遇到的一点问题
View Controller的组合应用其实很常见了,比如说Tab bar controller和Navigation view controller的组合使用,像这种一般都是Navigation v ...
- Php最近1个月总结
1.数据库方面太薄弱. 2.对于Php性能的调优也没有用到很专业的工具. 3.大型网站的架构也没有一个概念,需要细致的了解.
- HDU 4637 Rain on your Fat brother 线段与半圆和线段交 简单题
题意: 应该不难读懂. 做法: 我们可以把雨滴看做静止不动,然后maze(这题的那个人)就是往左上方运动就可以了,计算出maze能跑到的最远的点,然后就是求起点和终点所构成的线段与每个雨滴交的时间,注 ...
- codechef Jewels and Stones 题解
Soma is a fashionable girl. She absolutely loves shiny stones that she can put on as jewellery acces ...
- Swift学习笔记十
枚举 一个枚举为一组相关联的值定义一个通用类型,并且让你可以在代码中类型安全地操作这些值. C中的枚举将关联的名字指派给一系列整型值.Swift中的枚举类型更为活泼,并不需要为每个成员指定值,如果指定 ...
- Codeforces Round #339 (Div. 2) B. Gena's Code 水题
B. Gena's Code 题目连接: http://www.codeforces.com/contest/614/problem/B Description It's the year 4527 ...
- Spring MVC整合Velocity
Velocity模板(VM)语言介绍 Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来引用由j ...
- Flex-Security权限控制框架
转自:http://code.google.com/p/flex-security/ flex UI组件权限控制框架 一.快速开始 1) 下载并添加flex_security.swf在你的flex l ...
- 关于OpenGL+GLSL深度贴图采样
作者:Nin+.Lee 邮箱:lilei9110@gmail.com * 本文属原创,转载请注明出处. 在GLSL中,存在着sampler2D和sampler2DShadow两种2D贴图采样器.在对一 ...