模拟网站品牌列表的效果
模拟网站品牌列表的效果
说明:用户可以单击商品列表下方的"显示全部品牌"按钮来显示全部的品牌。
单击"显示全部品牌"按钮的同时,列表会将推荐的品牌的名字高这显示,按钮里的文字也换成"精简显示品牌"
附图:
<------------------------------------Jquery代码-------------------------------->
$(document).ready(function(){ //等待DOM加载完毕
var $category = $('ul li:gt(5):not(:last)'); //获得索引值大于5的品牌集合(除最后一条)
$category.hide(); //隐藏上面获取到的JQuery对象
var $toggleBtn = $('div.showmore > a'); //获取"显示全部品牌"按钮
$toggleBtn.click(function(){ //给按钮添加onclick事件
if($category.is(":visible")){ //如果元素显示
$category.hide(); //隐藏$category
$('.showmore a span')
.css("background-color","#ccc")
.text("显示全部品牌"); //改变背景图片和文本
$('ul li').removerClass("promoted"); //去掉高亮样式
}else{
$category.show(); //显示 $category
$('.showmore a span')
.css("background-color","#fff")
.css("border","1px solid #999")
.text("精简显示品牌"); //改变背景图片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('噢林巴斯')")
.addClass("promoted"); //添加高亮样式
}
return false; //超链接不跳转
});
});
<--------------------------------CSS代码----------------------------------------->
<-----------------------------------HTML代码------------------------------------>
附件:http://down.51cto.com/data/2361088