标签：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.js"></script>
<script>
$(function(){//等待DOM加载完毕
var $category=$(‘ul li:gt(5):not(:last)‘);//获得索引值等于5的集合对象，除了最后一条
$category.hide();//隐藏上面获得jquery对象
var $toggleBtn=$(‘div.showmore>a‘);//获取‘显示全部品牌’按钮
$toggleBtn.click(function () {//给按钮添加onclick事件
if($category.is(":visible"))//如果元素显示
{
$category.hide();//隐藏元素
$(this).find(‘span‘)
.text("显示全部品牌");//改变span的文本
$("ul li a").removeClass(‘promoted‘);//去掉高亮
}
else
{
$category.show();//显示元素
$(this).find(‘span‘)
.text(‘精简显示品牌‘);//改变span的文本
$(‘ul li a‘).filter(":contains(‘佳能‘),:contains(‘尼康‘),:contains(‘奥林巴斯‘)")
.addClass("promoted");//添加高亮
}
return false;//超链接不跳转
})
})
</script>
<style>
*{
padding: 0;
margin: 0;
font-family: ‘微软雅黑‘;
}
a{
text-decoration: none;
color: black;
}
.subCategoryBox{
border: 1px solid black;
width: 600px;
margin: 30px auto;
padding: 5px;
}
.subCategoryBox ul li{
width: 200px;
float: left;
text-align: center;
list-style-type: none;
height: 35px;
line-height: 35px;
}
.showmore{
clear: both;
text-align: center;
height: 50px;
}
.showmore a{
border: thin solid #aaaaaa;
padding: 5px 20px;
line-height: 50px;
}
.promoted{
color: yellowgreen;
}
</style>
</head>
<body>
<div class="subCategoryBox">
<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">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/nullObj/p/4792806.html
