Jquery实现的小功能2、显示品牌的列表
主要功能介绍：点击显示全部显示品牌则出现全部的商品
如果在点击全部商品则会又出现精简列表
利用css样式实现的功能：
鼠标移到商品上还会出现换色
让商品显示的格局比较美观一些
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery-1.4.2.min.js"></script>//在此处的Jquery文件封装的js文件下载地址：http://download.csdn.net/detail/feilong_12/5210621
<style>
*{margin:0;padding:0;}
body{ font-size:15px;text-align:center;}
.showLess{margin:auto;width:600px;}
.showLess ul li{display:block;float:left;width:200px;line-height:30px;}
.showMore{ clear:both;padding-top:15px;cursor:pointer;}
a{text-decoration:none;}
a:hover{color:red;text-decoration:underline}
</style>
<script>
$(function(){
var $hello=$(".showLess ul li:gt(2):not(:last)");
$hello.hide();
$(".showMore a span").toggle(function(){
$hello.show();
$(".showMore a span").text("精简显示品牌");
},function(){
$hello.hide();
$(".showMore a span").text("显示全部品牌");
})
})
</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 class="showMore"><a><span href="#">显示更多商品</span></a></div>
</div>
</body>
</html>
