折叠菜单及选择器的运用
今天才发现原来筛选标签还可以这么用。
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真的是好强大。
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .sub-category-box{ width:300px; border:1pxsolid#000; margin:20pxauto; background-color:gainsboro; } .sub-category-boxul{ list-style:none; width:100%; overflow:hidden; } .sub-category-boxulli{ 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:1pxsolid#000; text-align:center; } .sub-category-box.show-morea{ text-decoration:none; line-height:30px; } </style> <scriptsrc="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"); returnfalse; }); }); </script> </head> <body> <divclass="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> <divclass="show-more"> <ahref="javasript:void(0);">显示全部品牌</a> </div> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!