2023年7月9日发(作者：)

JQuery-第⼀课某⽹站品牌列表精简全部显⽰效果的实现JQuery - 第⼀课 某⽹站品牌列表精简/全部显⽰效果的实现品牌列表，实现全部显⽰/精简显⽰的切换。

注意点：1.思考诸如类似js/ajax的实现的思路，思考路线（思考ajax扩展）。2.理解javascript基于事件模型的特点3.理解Jquery常见函数能简化代码的优点

初始，精简显⽰

单击按钮， 全部显⽰，并⾼亮显⽰推荐品牌

实现：

1.设计静态HTML样式及内容

*{ 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/) no-repeat 0 0;} .promoted a { color:#F50;}

2.逐步分解，分叉交互过程及图⽂变化

$(document).ready(function(){ var $category = $('ul li:gt(5):not(:last)'); $(); var $toggleBtn = $('re > a'); $(function(){ $(); $('.showMore a span').css("background", "url(images/) no-repeat 0 0").text("精简显⽰"); $('ul li').filter(":contains('索尼'),:contains('其他')").addClass("promoted");

},function(){ $(); $('.showMore a span').css("background", "url(images/) no-repeat 0 0").text("显⽰全部"); $('ul li').removeClass("promoted");

});

})