JQuery - 第一课 某网站品牌列表精简/全部显示效果的实现
品牌列表，实现全部显示/精简显示的切换。
?
注意点：
1.思考诸如类似js/ajax的实现的思路，思考路线（思考ajax扩展）。
2.理解javascript基于事件模型的特点
3.理解Jquery常见函数能简化代码的优点
?
?
?
初始，精简显示
?
单击按钮， 全部显示，并高亮显示推荐品牌
?
?
实现：
?
1.设计静态HTML样式及内容
?
?
?
<body> <div class="SubCategoryBox"> <ul> <li><a href="#">佳能</a><i>（2000）</i></li> <li><a href="#">索尼</a><i>（2000）</i></li> <li><a href="#">三星</a><i>（2000）</i></li> <li><a href="#">尼康</a><i>（2000）</i></li> <li><a href="#">松下</a><i>（2000）</i></li> <li><a href="#">卡西欧</a><i>（2000）</i></li> <li><a href="#">佳能2</a><i>（2000）</i></li> <li><a href="#">佳能3</a><i>（2000）</i></li> <li><a href="#">佳能4</a><i>（2000）</i></li> <li><a href="#">佳能5</a><i>（2000）</i></li> <li><a href="#">佳能5</a><i>（2000）</i></li> <li><a href="#">佳能6</a><i>（2000）</i></li> <li><a href="#">佳能7</a><i>（2000）</i></li> <li><a href="#">佳能8</a><i>（2000）</i></li> <li><a href="#">佳能9</a><i>（2000）</i></li> <li><a href="#">其他</a><i>（2000）</i></li> </ul> <div class="showMore"> <a href="#"><span>显示全部</span></a> </div> </div> </body>
?
?
?
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
/***********************************************/
.SubCategoryBox {
width:600px; margin:0 auto; text-align:center;
margin-top:40px;background:#FFF000; border:solid 3px green;
}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showMore { clear:both; text-align:center;padding-top:10px;}
.showMore a {
display:block; width:120px; margin:0 auto;
line-height:24px; border:1px solid #AAA;
}
.showMore a span { padding-left:15px; background:url(images/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
?
?
?
2.逐步分解，分叉交互过程及图文变化
?
?
$(document).ready(function(){
var $category = $('ul li:gt(5):not(:last)');
$category.hide();
var $toggleBtn = $('div.showMore > a');
$toggleBtn.toggle(function(){
$category.show();
$('.showMore a span').css("background", "url(images/up.gif) no-repeat 0 0").text("精简显示");
$('ul li').filter(":contains('索尼'),:contains('其他')").addClass("promoted");
},function(){
$category.hide();
$('.showMore a span').css("background", "url(images/down.gif) no-repeat 0 0").text("显示全部");
$('ul li').removeClass("promoted");
});
})
?
?
?
?