折叠菜单及选择器的运用

今天才发现原来筛选标签还可以这么用。
not（expr|ele | fn）：从匹配元素的集合中删除与指定表达式匹配的元素
下面demo中的使用： var $category = $（".sub-category-box>ul>li:gt（2）:not（:last）"）; //列表中索引大于2的，除了最后一个
filter（expr|obj|ele|fn）：r筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
$（"ul>li"）.filter（":contains（"佳能"）,:contains（"索尼"）,:contains（"三星"）"） .toggleClass（"promoted"）;// 筛选出li标签中包含佳能、索尼、三星的标签，并设置class
找个demo中使用了这两个方法。突然感觉 jQuery真的是好强大。

<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.sub-category-box{width: 300px;border: 1px solid #000;margin: 20px auto;background-color: gainsboro;}.sub-category-box ul{list-style: none;width: 100%;overflow: hidden;}.sub-category-box ul li{float: left;width: 95px;height: 35px;text-align: center;background-color: darkorange;box-sizing: border-box;line-height: 40px;border-radius: 5px;margin: 2px;}.promoted{background-color: red ！important;color: white ！important;}.sub-category-box .show-more{width: 100%;height: 30px;border: 1px solid #000;text-align:center;}.sub-category-box .show-more a{text-decoration: none;line-height: 30px;}</style><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$（function （） {//列表中索引大于2的，除了最后一个var $category = $（".sub-category-box>ul>li:gt（2）:not（:last）"）;$category.hide（）;$（".show-more"）.click（function （） {$category.stop（）.slideToggle（300）;//筛选出符合条件的选择器$（"ul>li"）.filter（":contains（"佳能"）,:contains（"索尼"）,:contains（"三星"）"） .toggleClass（"promoted"）;return false;}）;}）;</script></head><body><div class="sub-category-box"><ul><li>佳能</li><li>索尼</li><li>三星</li><li>尼康</li><li>松下</li><li>卡西欧</li><li>富士</li><li>柯达</li><li>理光</li><li>明基</li><li>松下</li><li>卡西欧</li><li>富士</li><li>柯达</li><li>海尔</li><li>其他品牌</li></ul><div class="show-more"><a href="javasript:void（0）;">显示全部品牌</a></div></div></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！