本文實例講述了jQuery實現常見的隱藏與展示列表效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>www.49028c.com jquery品牌列表效果</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel=" rel="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 class="SubCategoryBox"> <ul class="clear" id="bancon"> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >佳能</a><i>(30441)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >索尼</a><i>(30442)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >三星</a><i>(30443)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >尼康</a><i>(30444)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >松下</a><i>(30445)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >卡西歐</a><i>(30446)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >富士</a><i>(30447)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >柯達</a><i>(30448)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >賓得</a><i>(30449)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >理光</a><i>(30450)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >奧斯巴林</a><i>(30451)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >明基</a><i>(30452)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >愛國者</a><i>(30453)</i></li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >其他品牌相機</a><i>(30454)</i></li> </ul> <div class="showmore" id="showpp"> <a href=""><span>顯示全部品牌</span></a> </div> </div> <script src="http://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代碼運行工具 http://tools.VeVB.COm/code/HtmlJsRun測試效果如下：
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
