<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>品牌的精選和顯示全部</title>
<style>
*{ margin:; padding:;}
body{ fontsize:px; textalign:center}
showLess{ margin:auto; paddingtop:px; width:px;}
showLess ul li{ display:block; float:left; width:px; lineheight:px;}
showMore{ clear:both; paddingtop:px;}
a{ textdecoration:none;}
a:hover{ cursor:pointer; color:#F; textdecoration:underline;}
</style>
<script language="javascript" type="text/javascript" src="/script/jqueryminjs"></script>
<script>
$(function(){
$("showLess ul li:gt():not(:last)")hide();
$("showMore a span")toggle(function(){
$("showLess ul li:gt():not(:last)")slideDown("slow");
$("showMore a span:last")text("精簡品牌");
$("#b")replaceWith("<b id=b></b>");
return false;
}function(){
$("showLess ul li:gt():not(:last)")slideUp("");
$("showMore a span:last")text("顯示全部品牌");
$("#b")replaceWith("<b id=b>+</b>");
return false;
})
$("showLess ul li:last")click(function(){
$("showLess ul li:gt():not(:last)")slideToggle();
return false;
});
})
</script>
</head>
<body>
<div class="showLess">
<ul>
<li><a href="#">美利達</a></li>
<li><a href="#">捷安特</a></li>
<li><a href="#">飛鴿</a></li>
<li><a href="#">寶島</a></li>
<li><a href="#">新日</a></li>
<li><a href="#">巴赫</a></li>
<li><a href="#">永久</a></li>
<li><a href="#">二八</a></li>
<li><a href="#">更多品牌</a></li>
</ul>
</div>
<div class="showMore">
<a href="#"><b id=b></b><span>顯示全部品牌</span></a>
</div>
</body>
</html>
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19922.html
