显示效果:

之后全部展开:

 <!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. Animation Spinner【项目】

    https://github.com/vjpr/healthkick/blob/master/src/win/healthkick/ucSpinnerCogs.xaml 网上的例子,放在UserCon ...

  2. UI：关于RGB与16进制颜色值的转换

    IOS基本图形绘制 参考 取色对照表 参照 页面背景改为   #5CACEE   的颜色.有两个方法 方法一: 加两个宏 #define UIColorFromHexWithAlpha(hexValu ...

  3. 《Secrets of the JavaScript Ninja》：JavaScript 之运行时代码

    最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...

  4. js和jquery中的事件委托

    [转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...

  5. 单步运行linux kernel ?

    如果能给linux kernel打log,如果能单步运行,如果能像普通应用程序那样,step by step的查看程序跑哪里了.. 该多好?这是一个梦想,但从未实现过:因为那是kernel,不是应用程 ...

  6. 利用css中的border生成三角，兼容包括IE6的主流浏览器

    1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...

  7. NLog官方文档

    NLog快速使用 NLog配置 NLog通过代码定义配置 Target Layouts Layout Renderers

  8. 复选框输入Android Studio 如果修改LogCat的颜色，默认全是黑色看着挺不舒服的

    今天一直在查找复选框输入之类的问题,上午正好有机会和大家分享一下. 怎么找到并表现LogCat这里就不需要再讲了吧,主要说一下本篇的主题,如何修改他的颜色 .我们在使用Eclipse的时候应该都用过L ...

  9. C++学习笔记之运算符重载

    一.运算符重载基本知识 在前面的一篇博文 C++学习笔记之模板(1)——从函数重载到函数模板 中,介绍了函数重载的概念,定义及用法,函数重载(也被称之为函数多态)就是使用户能够定义多个名称相同但特征标 ...

  10. C++学习笔记之字符函数库cctype

    C++从C语言继承了一个与字符相关的.非常方便的函数软件包,它可以简化诸如确定字符是否为大写字母.数字.标点符号等工作,这些函数原型是在头文件cctype(老式风格ctype.h)中定义的. 下表对这 ...