某网站品牌的列表效果(引自锋利的jQuery)
浏览数：16 /
时间：2015年06月09日
<!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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
