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 ...
随机推荐
- Mahout之Canopy Clustering深入理解
转自:http://www.cnblogs.com/vivounicorn/archive/2011/09/23/2186483.html Mahout学习——Canopy Clustering 聚类 ...
- Fragment实现底部选项卡切换效果
现在很多APP的样式都是底部选项卡做为首页的,实现这样的效果,我们一般有这样几种方式,第一,最屌丝的做法,我直接自定义选项卡视图,通过监听选项卡视图,逻辑控制内容页的切换,这样做的想法一般是反正这几个 ...
- git/github 使用
原文:http://www.cnblogs.com/fnng/archive/2011/08/25/2153807.html git/github学习笔记 Posted on 2011-08-25 2 ...
- 传统的Ado.net 参数设置：params SqlParameter[] commandParameters
C#代码 ExecuteReader(string connectionString, CommandType commandType, string commandText, params Sql ...
- C++开发必看 四种强制类型转换的总结 [转]
一.C风格的强制类型转换(Type Cast)很简单,不管什么类型的转换统统是: TYPE b = (TYPE)a 二.C++风格的类型转换提供了4种类型转换操作符来应对不同场合的应用. co ...
- SQL函数集合
1. PATINDEX ( '%pattern%' , expression ) 返回pattern字符串在表达式expression里第一次出现的位置,起始值从1开始算. pattern字符串在ex ...
- 凯尔卡C68全球版汽车电脑诊断仪
产品简介: C68汽车故障诊断仪是凯尔卡公司新推出的一款集经济.简约.稳定.耐用于一体的汽车诊断设备, 该产品采用了最新的智能移植技术,集成度高:C68车型覆盖广,测试功能强大.数据准确等优点, 是目 ...
- 不要滥用div,保持代码的整洁
这篇文章算是很基础的了.旨在介绍如何保证页面代码的整洁.以维护性.使用有语义的页面标签,减少标签的滥用. 1. 移除不必要的<div>标签 嵌套在<form><ul> ...
- 广州项目实施步骤II_练习配置HaProxy的重定向负载均衡
CentOS6.4 配置Haproxy Haproxy下载地址:http://pan.baidu.com/share/link?shareid=1787182295&uk=18290183 ...
- Task could not find "AxImp.exe" using the SdkToolsPath "C:\Program Files\Microsoft SDKs\Windows\v7.0A\bin\"
本机v7.0A目录里没有AxImp.exe,无奈只能去官网下了个V7.1的. 安装完V7.1后,去“开始-所有程序-Microsoft Windows SDK v7.1”里找到Windows SDK ...