显示效果:

之后全部展开:

 <!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的更多相关文章

  1. jQuery选择器之基本选择器Demo

    测试代码: 01-基本选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. jQuery选择器之属性选择器Demo

    测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. jQuery选择器之层次选择器Demo

    测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  4. jQuery选择器之内容过滤选择器Demo

    测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  5. jQuery选择器之基本过滤选择器Demo

    测试代码: 03-基本过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. jQuery选择器之表单选择器Demo

    测试代码: 09-表单选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. jQuery选择器之表单对象属性过滤选择器Demo

    测试代码: 08-表单对象属性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  8. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  9. jQuery选择器之可见性过滤选择器Demo

    测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

随机推荐

  1. 行为类模式(一):职责链(Chain Of Responsibility)

    定义 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系. 将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. UML 优点 将请求的发送者和接收者解耦 可以 ...

  2. 为什么无法发起qq临时会话,必须添加好友?如何设置才能临时会话?

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-06-03) 一. QQ等级低于10级不能进行临时会话 按照腾讯的设置,QQ等级如果低于10级(2个月亮+2颗星星),无法发起 ...

  3. C# OpenFileDialog和PictrueBox

     string resultFile = ""; OpenFileDialog openFileDialog1 = new OpenFileDialog(); openFile ...

  4. 在android market发布个人免费应用的步骤

    写了一段时间的android应用了,只是在自己手机上面安装. 上周申请了android developer,需要一次性25美元的程序开发注册费用.费用需要用google checkout,所以还要先申 ...

  5. [Angular2 Router] Using snapshot in Router

    In the application, we have heros list, when click each hero, will redirect to hero detail view. Tha ...

  6. Linux内核设计与实现 读书笔记 转

    Linux内核设计与实现  读书笔记: http://www.cnblogs.com/wang_yb/tag/linux-kernel/ <深入理解LINUX内存管理> http://bl ...

  7. Linux 必掌握的 SQL 命令

    数据库和 SQL 在本系列教程中,目前我们使用平面文本文件来存储数据.平面文本文件可能适合相对较少的数据,但它们对存储大量数据或查询该数据没有多大帮助.多年来,为该目的开发了多种数据库,包括分层和网络 ...

  8. ubuntu桌面版打开终端Terminal的几种方法

    1. Ctrl + Alt + T 快捷键直接打开2. 在Ubuntu左上角选择File/Open in Terminal 3. 快捷键alt+F2调出Run a Command,输入gnome-te ...

  9. 关于Android中TextView显示多个空格

    一.直接填写文字,输入多少,显示多少,如下: android:text="AAA     AAA"     ————————>显示:AAA     AAA 二.通过设置str ...

  10. LeetCode48 Rotate Image

    题目: You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwis ...