<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>品牌列表案例</title>
<script src="js/jquery-2.1.1.min.js" rel="script"></script>
<style>
ul li{
list-style: none;
}
*{
text-decoration: none;
}
span{
background: #1a272f;
color: #fff;
border:1px solid #647787;
150px;
padding: 5px;
text-align: center;
vertical-align: middle;
border-radius: 5px;
margin: 0 50px;
}
.highlighted{
color: #f00;
text-decoration: underline;
}
</style>
<script>
$(document).ready(function () {
//从列表的索引值大于5开始，但是不包含最后一条记录的所有列表元素隐藏
var $eategory=$('ul li:gt(5):not(:last)');
//$eategory.hide();//隐藏上面获取到的jQuery对象
//当用户点击“显示全部品牌”按钮时，所有列表都显示，且文本变为“精简显示品牌”，同时推荐品牌高亮显示
// 首先获取按钮，
var $toggleBtn =$('div.showMore > a');
//给按钮添加点击事件，且列表全部显示，但是超链接不跳转
//法一：最中规中矩的做法，但是很麻烦也很呆板,没有交互
/*$toggleBtn.click(function(){
$eategory.show();//显示全部列表
//按钮文本改为精简品牌展示
$('.showMore a span').text("精简显示品牌");
//品牌推荐高亮显示
$('ul li').filter(":contains('demo2'),:contains('demo5'),:contains('demo9')").addClass("highlighted");
return false;//链接不跳转
});*/
//法二：相对法一较为灵活，思路清晰易理解，且用户体验更佳。
$toggleBtn.click(function(){
if($eategory.is(":hidden")){ //如果元素隐藏
$eategory.show();//显示全部列表
$('.showMore a span').text("精简显示品牌");
//filter:筛选
$('ul li').filter(":contains('demo2'),:contains('demo5'),:contains('demo9')").addClass("highlighted");
}else{
$eategory.hide();
$('ul li').removeClass("highlighted");
$('.showMore a span').text("显示全部品牌");
}
return false;//链接不跳转
});
})
</script>
</head>
<body>
<div class=”SubCategoryBox”>
<ul>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">demo1</a><i>(30440)</i></li>
<li><a href="#">demo2</a><i>(30440)</i></li>
<li><a href="#">demo3</a><i>(30440)</i></li>
<li><a href="#">demo4</a><i>(30440)</i></li>
<li><a href="#">demo5</a><i>(30440)</i></li>
<li><a href="#">demo6</a><i>(30440)</i></li>
<li><a href="#">demo7</a><i>(30440)</i></li>
<li><a href="#">demo8</a><i>(30440)</i></li>
<li><a href="#">demo9</a><i>(30440)</i></li>
<li><a href="#">demo10</a><i>(30440)</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>