<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery选择器综合案例</title>
<link rel="stylesheet" type="text/css" href="../fenglijquery/css/goodName.css">
</head>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//第一步 从第七条开始隐藏后面的品牌 (除最后一个除外)
var $category=$("ul li:gt(5):not(:last)");//ul标签中的索引大于5中的元素 不是最后一个
$category.hide("slow");
//当用户显示全部 获取按钮对象
var $toggleBtn=$("div.showmore > a")//标签样式为showmore的div元素的子元素a标签
$toggleBtn.click(function(event){
//判断是否为显示
if($category.is(":visible")){
$category.hide();
$(this).find("span")
.css("background","url(img/down.gif)no-repeat 0 0")
.text("显示全部品牌");
//去掉高亮显示
$("ul li").removeClass("promoted");
}else{
$category.show();
//将显示的全部品牌更改为显示精简品牌 $(this)其实也就是$toggleBtn
//find()是对子集进行操作 filter是对自身元素集合进行操作
$(this).find('span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精简显示品牌");//正在处理的元素的后代元素的好方法。也就是a标签中span元素
//进行高亮显示
$("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted")//添加高亮显示样式
}
// event.preventDefault();
return false //连接不跳转 让浏览器认为用户没有点击此链接
})
});
//上面我们是添加了if判断来处理一个按钮上的交互事件 但是jquery中海油更简单的处理方式
$toggleBtn.toggle(function(){
//显示元素
},function(){
//隐藏元素
})
</script>
<body>
<p>精简：</p>
<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>