jquery選擇器（內容部分顯示點擊全部顯示）

<style>

.listbox  li{ float:left; width:100px; height:30px; line-height:30px; font-size:12px; text-align:center; list-style:none;}
.listbox  li a{ font-size:12px; text-decoration:none; color:#999;}
.show-more{ width:100px; margin:0 auto; height:30px; line-height:30px; border:1px solid #666; background:#CCC; color:#FFF; margin-bottom:10px;}
.show-more a{  font-size:12px; text-align:center; color:#000; display:block; width:100px; height:30px; text-decoration:none;}

</style>

<div class="listbox" style=" width:300px; height: auto; border:1px solid #CCC;">


<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<div style="height:0px; width:100%; clear:both; _zoom:1;"></div>
<div class="show-more">
<a href=""><span>顯示更多</span></a>
</div>
</div>
<script>
$(function(){
var $list= $(".listbox li:gt(5)")
$list.hide();
var $showmore=$("div .show-more>a");
$showmore.click(function(){

if($list.is(":visible")){
$list.hide();
$(".show-more a span").text("顯示跟多")
}else{
$list.show();
$(".show-more a span").text("顯示精簡")

}
return false;
})
})

</script>