- show() 显示隐藏的匹配元素
- css(name,value)给元素设定样式
- text(string)设置所有匹配元素的内容
- filter(expr)筛选出与指定表达式匹配的元素集合,其中expr可以使多个选择器的组合
- addClass(class)为匹配的元素添加指定的类名
- removeClass(class)从匹配的元素中删除指定样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<style type="text/css">
.SubCategoryBox{width: 600px;}
.SubCategoryBox ul { width: 600px;}
.SubCategoryBox ul li { list-style: none; width: 200px; float: left;}
.showmore { width: 600px; }
.showmore a{ float: right; padding-right: 10px;}
.promoted { font-size: 14px; font-weight: lighter; color: #99000; }
</style>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function(){
var $category=$('ul li:gt(7):not(:last)');
$category.hide();
var $toggleBtn = $('div.showmore > a');
$toggleBtn.click(function(){
if($category.is(":visible"))
{
$category.hide();
$('.showmore a span')
.text("显示全部品牌");
$('ul li').removeClass("promoted");
}
else
{
$category.show();
$('.showmore a span')
.text("精简显示品牌");
$('ul li').filter(":contains('佳能')")
.addClass("promoted");
}
return false;
})
})
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
<li><a href="#">佳能</a><i>(3044)</i></li>
</ul>
<div class="showmore">
<a href="#"><span>显示全部</span></a>
</div>
</div>
</body>
</html>