显示效果:
之后全部展开:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>动态列表效果.html</title> 6 <style type="text/css"> 7 *{ margin:0; padding:0;} 8 body {font-size:12px;text-align:center;} 9 a { color:#04D; text-decoration:none;} 10 a:hover { color:#F50; text-decoration:underline;} 11 .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;} 12 .SubCategoryBox ul { list-style:none;} 13 .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;} 14 .showmore { clear:both; text-align:center;padding-top:10px;} 15 .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;} 16 .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;} 17 .promoted a { color:#F50;} 18 19 </style> 20 <!-- 引入jQuery var $li = $("li:gt(5):not(':last')");--> 21 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 22 <script type="text/javascript"> 23 24 //window.onload == 25 $(document).ready(function(){ 26 var $li=$("ul>li:gt(5):not(':last')"); 27 $li.hide(); 28 $("a>span").click(function(){ 29 // if($li.is(":hidden")){ 30 // $li.show(3000); 31 // $("a>span").html("精简显示"); 32 // }else{ 33 // $li.hide(3000); 34 // $("a>span").html("显示全部品牌"); 35 // } 36 // /切换... 37 // 如果元素为隐藏的状态，调用toggle 方法，会默认显示，如果元素为显示的状态，调用toggle 方法，默认隐藏... 38 $li.toggle(3000); 39 40 }) 41 42 }); 43 </script> 44 </head> 45 <body> 46 47 48 <div class="SubCategoryBox"> 49 <ul > 50 <li ><a href="#">佳能</a><i>(30440) </i></li> 51 <li ><a href="#">索尼</a><i>(27220) </i></li> 52 <li ><a href="#">三星</a><i>(20808) </i></li> 53 <li ><a href="#">尼康</a><i>(17821) </i></li> 54 <li ><a href="#">松下</a><i>(12289) </i></li> 55 <li ><a href="#">卡西欧</a><i>(8242) </i></li> 56 <li ><a href="#">富士</a><i>(14894) </i></li> 57 <li ><a href="#">柯达</a><i>(9520) </i></li> 58 <li ><a href="#">宾得</a><i>(2195) </i></li> 59 <li ><a href="#">理光</a><i>(4114) </i></li> 60 <li ><a href="#">奥林巴斯</a><i>(12205) </i></li> 61 <li ><a href="#">明基</a><i>(1466) </i></li> 62 <li ><a href="#">爱国者</a><i>(3091) </i></li> 63 <li ><a href="#">其它品牌相机</a><i>(7275) </i></li> 64 </ul> 65 <div class="showmore"> 66 <a href="javascript:void(0);"><span>显示全部品牌</span></a> 67 </div> 68 </div> 69 <!-- Resources from http://down.liehuo.net --> 70 </body> 71 </html>
本文转自SummerChill博客园博客，原文链接：http://www.cnblogs.com/DreamDrive/p/5780106.html，如需转载请自行联系原作者
