显示效果:

之后全部展开:

 <!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. sql server对并发的处理-乐观锁和悲观锁【粘】

    假如两个线程同时修改数据库同一条记录,就会导致后一条记录覆盖前一条,从而引发一些问题. 例如: 一个售票系统有一个余票数,客户端每调用一次出票方法,余票数就减一. 情景: 总共300张票,假设两个售票 ...

  2. WebService《JavaEE6权威指南 基础篇第4版》

    [Web服务] 为运行在不同平台和框架之上的软件提供了互操作的标准方式.良好的互操作性和可扩展性.消息采用自包含文档的形式. ——解决异构系统之间交互.解决异构系统通信问题:  1.通过XML,JSO ...

  3. extjs tablepanel 高度自适应有关问题

    extjs tablepanel 高度自适应问题 项目中为了给客户好点的功能切换体验,想到了用extjs的tabpanel 在页面中用了tabpanel后,高度新打开的tab页的iframe 的高度总 ...

  4. Python-面向对象 (二 继承)

    一 继承   基类定义例如以下: class people:     #define attribute     name = ''     age  = 0     #define private ...

  5. CentOS6.5下安装MariaDB5.5.36

    yum groupinstall -y "Development Tools" yum install -y cmake openssl-devel zlib-devel yum ...

  6. GLSL实现Image Filter 【转】

    http://blog.csdn.net/a3070173/archive/2008/11/27/3390477.aspx 图像过滤无论是在作图工具还是特效的实现上都时有运用,这里发一些通常会使用到的 ...

  7. Android语音搜索

    前言 在现有的软件的搜索框中基本上都会加上语音搜索的图标,以方便用户输入.我们xxxx的搜索框其实也可以借鉴这样的输入方式,提高用户体验.语音识别有3种方式实现①使用intent调用语音识别程序;②通 ...

  8. [ES6] 12. Shorthand Properties in ES6

    Where destructuring in ES6 allows you to easily get properties out of an object, this shorthand prop ...

  9. Java Web系统经常使用的第三方接口

    1. Web Service 接口 1.1 接口方式说明和长处 在笔者的开发生涯中,当作为接口提供商给第三方提供接口时,以及作为client去调用第三方提供的接口时,大部分时候都是使用 Web  Se ...

  10. 删除sqlserver2008登录记录

    SQL Server Management Studio登陆窗口 清空这些多余的登陆名 删除SqlStudio.bin文件 WinXP: C:\Documents and Settings\用户文件夹 ...