jQuery的品牌列表效果

阳光穿透心脏的1/2处 2022-07-13 13:44 162阅读 0赞

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script src="jquery-1.8.3.min.js"></script> <style> .Category { width: 500px; height: 180px; border: 1px solid #fde; margin: auto; } .Category li { list-style-type: none; float: left; margin-left: 30px; margin-right: 30px; display: block; } a { text-decoration: none; color: #cc1; } .showmore { clear: both; width: 150px; height: 30px; border: 1px solid #acf; margin: 0 auto; text-align: center; } .showmore a { text-decoration: none; color: #9bd; } .pro a { color: red; } </style> </head> <body> <div class="Category"> <ul> <li><a href="#">佳能</a><i>(30425)</i></li> <li><a href="#">Sony</a><i>(30456)</i></li> <li><a href="#">三星</a><i>(32549)</i></li> <li><a href="#">尼康</a><i>(27888)</i></li> <li><a href="#">松下</a><i>(52855)</i></li> <li><a href="#">富士</a><i>(94577)</i></li> <li><a href="#">柯达</a><i>(52788)</i></li> <li><a href="#">爱国者</a><i>(57885)</i></li> <li><a href="#">理光</a><i>(45785)</i></li> <li><a href="#">卡西欧</a><i>(85522)</i></li> <li><a href="#">明基</a><i>(57544)</i></li> <li><a href="#">奥林巴斯</a><i>(58757)</i></li> <li><a href="#">其他品牌相机</a><i>(45752)</i></li> </ul> <div class="showmore"> <a href="#"><span>显示全部品牌</span></a> </div> </div> <script> $(document).ready(function() { var $category = $('ul li:gt(5):not(:last)');//获取大于第6个li标签的所有集合，除了最后一个 $category.hide();//让它们隐藏 var $toggleBtn = $('div.showmore >a');//获取按钮 $toggleBtn.toggle(function() { $category.show(); $(this).find('span').text("精简显示品牌") $('ul li').filter(":contains('佳能'),:contains('富士'),:contains('尼康')").addClass("pro");//筛选出内容匹配对象，然后添加class return false; }, function() { $category.hide(); $(this).find('span').text("显示全部品牌"); $('ul li').removeClass("pro"); }); }); </script> </body> </html>

精简效果如图所示：

![Center][]

全部效果如图所示：

![Center 1][]

[Center]: /images/20220713/cf6ca013a8074e95b23f2bfd042e4763.png
[Center 1]: /images/20220713/6fdcdff982b543ffb8802e0071cc01f0.png