<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title> jquery品牌列表效果</title> <meta content=""> <meta content=""> <link href=""external nofollow" stylesheet"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; } body { font: 16px/20px "Microsoft yahei,'微软雅黑'" color: #fff; } ul { list-style-type:none; } a { text-decoration: none; color: #000; } ul li { float: left; text-align: right; } .clear:before,.clear:after { content: ""; clear: both; display: table; height: 0; overflow: hidden; zoom: 1; } .SubCategoryBox { width: 473px; margin: 0 auto; border: 1px solid; } .SubCategoryBox ul{ padding: 5px 10px; } .SubCategoryBox ul li { padding: 5px; } .SubCategoryBox ul li:nth-child(3n-2) { width: 130px; } .SubCategoryBox ul li:nth-child(3n-1) { width: 161px; margin-right: 30px; } .SubCategoryBox ul li:nth-child(3n) { width: 130px; } .showmore { text-align: center; } .showmore a { background: #eef; color: #CFCFE0; } .hightlight a,.hightlight i { color: red; /* font-weight: bold; */ } </style> </head> <body> <div> <ul> <li><a href="javascript:" >佳能</a><i>(30441)</i></li> <li><a href="javascript:" >索尼</a><i>(30442)</i></li> <li><a href="javascript:" >三星</a><i>(30443)</i></li> <li><a href="javascript:" >尼康</a><i>(30444)</i></li> <li><a href="javascript:" >松下</a><i>(30445)</i></li> <li><a href="javascript:" >卡西欧</a><i>(30446)</i></li> <li><a href="javascript:" >富士</a><i>(30447)</i></li> <li><a href="javascript:" >柯达</a><i>(30448)</i></li> <li><a href="javascript:" >宾得</a><i>(30449)</i></li> <li><a href="javascript:" >理光</a><i>(30450)</i></li> <li><a href="javascript:" >奥斯巴林</a><i>(30451)</i></li> <li><a href="javascript:" >明基</a><i>(30452)</i></li> <li><a href="javascript:" >爱国者</a><i>(30453)</i></li> <li><a href="javascript:" >其他品牌相机</a><i>(30454)</i></li> </ul> <div> <a href=""><span>显示全部品牌</span></a> </div> </div> <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script> <script> $(function(){ var $target=$("#bancon li:gt(5):not(:last)"); $target.hide(); var $toggleBtn=$("#showpp a"); $toggleBtn.click(function(){ if($target.is(":visible")){ $target.hide(); $(this).find("span").text("显示所有品牌"); $("ul li").removeClass('hightlight') } else { $target.show(); $(this).find('span').text("精简显示品牌"); $("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥斯巴林')").addClass('hightlight') } return false; /*阻止a标签的跳转*/ }); }); </script> </body> </html>
使用在线HTML/CSS/JavaScript代码运行工具 测试效果如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》