淘宝分类常见---部分显示和全部显示的js效果

需求就是，点击“更多按钮”，显示全部的分类详情，再次点击，显示部分分类。

展开：

收起：

结构：

<div class="SubBox" id="SubBox">
<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" id="ShowMore"><a href="javascript:;"><span>显示全部品牌</span></a></div></div>

样式：

*{ margin:; padding:;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubBox ul { list-style:none;}
.SubBox 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;}

js代码：

<script>
 $(function(){
     var $SubBox=$('#SubBox li:gt(5):not(:last)');
     var $ShowMore=$('#ShowMore');
     $SubBox.hide();
     $ShowMore.click(function(){
         if($SubBox.is(':visible')){
             $SubBox.hide();
             $ShowMore.find('span')
                     .text("显示全部品牌")
                     //.css('background','url(../images/down.gif)');
         }
         else{
             $SubBox.show();
             $ShowMore.find('span')
                     .text("精简显示品牌")
                     //.css('background','url(../images/up.gif)');
         }
     })
 });
</script>

　总结：这个例子中所使用的jquery

1、 过滤选择器。li:gt(5):not(:last)   从第六个元素开始，除了最后一个元素的所有li元素。

2、 显示隐藏 show();  hide();

3、 css（'name','value'）给元素设置样式;

4、find('子元素');   另外还有一个filter('对他本身的元素操作');   例如 找到的是自己本身的li，样式写在promoted a上面。

$SubBox.filter(":contains('柯达'),:contains('爱国者'),:contains('佳能')").addClass('promoted');

效果很简单，come on！