首页 > 代码库 > 某网站品牌的列表效果(引自锋利的jQuery)
某网站品牌的列表效果(引自锋利的jQuery)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="generator" content="editplus" /> <title>某网站品牌的列表效果</title> <script src="jquery-1.7.1.min.js" type="text/javascript"></script></head><body> <div class="SubCategoryBox"> <ul> <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>(1446)</i></li> <li><a href="#">爱国者</a><i>(3091)</i></li> <li><a href="#">其他品牌相机</a><i>(7275)</i></li> </ul> <div class="showmore"> <a href="#"><span>显示全部品牌</span></a> </div> </div> <script type="text/javascript"> $(function () { //等待DOM加载完毕 var $category = $(‘ul li:gt(5):not(:last)‘); //获取索引值大于5的品牌集集合对象（除最后一条） $category.hide(); //隐藏上面获取到的jQuery对象 var $toggleBtn = $(‘div.showmore > a‘); //获取“显示全部品牌”按钮 //方法1： $toggleBtn.click(function () { //给按钮添加onclick事件 if ($category.is(":visible")) { //如果元素显示 $category.hide(); //隐藏$category $(‘.showmore a span‘) .text("显示全部品牌"); //改变背景图片和文本 } else { $category.show(); //显示全部品牌 $(‘.showmore a span‘) .text("精简显示品牌"); //这里使用了链式操作 $(‘ul li a‘).filter(":contains(‘佳能‘), :contains(‘尼康‘), :contains(‘奥林巴斯‘)") } }) //方法2：直接调用toggle()方法 //$toggleBtn.toggle(function () { // $category.show(); //显示全部品牌 // $(‘.showmore a span‘) // .text("精简显示品牌"); //这里使用了链式操作 // $(‘ul li a‘).filter(":contains(‘佳能‘), :contains(‘尼康‘), :contains(‘奥林巴斯‘)") //}, function () { // $category.hide(); //隐藏$category // $(‘.showmore a span‘) // .text("显示全部品牌"); //改变背景图片和文本 //}) return false; //超链接不跳转 }) </script></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。