<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
<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:20px;}/*display:block=list-style:none;去掉ul前的样式*/
.showMore{clear:both;padding-top:15px}
a{text-decoration:none}/*超链接去掉下划线*/
a:hover{color:#0F3;text-decoration:underline}/*hover伪类；鼠标移上变色，加下划线*/
</style>
<script>
//jQuery精简品牌列表
$(function(){
//1默认情况下，显示前3个，需要将三个以后的隐藏
//gt(2)索引大于2，not(:last)左后一列排除
var $category=$(".showLess ul li:gt(2):not(:last)");
$category.hide();
//2点击显示全部品牌的时候，显示全部的。同时显示全部变成简显品
$(".showMore a span").toggle(function(){
$category.show();
$(".showMore a span").text("精简显示品牌");
},function(){
//3点击简显品牌，要将三个以后的隐藏，然后再将简显换成全部显示
$category.hide();
$(".showMore a span").text("显示全部品牌");
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>
<li><a href="#">更多品牌</a></li>
<div class="showMore"><a href="#"><span>显示全部品牌</span></a></div>
</ul>
</div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
