可見性過濾器 · jQuery學習

:hidden 選取不可見元素 :visible 選取到可見的元素案例 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="jquery/jquery-3.2.1.min.js"></script> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width:800px; height:500px; margin:25px auto; } .box ul li{ float:left; margin-right:25px; } li{ list-style: none; } </style> </head> <body> <div class="box"> <ul> <li>蘋果</li> <li>小米</li> <li>VIVO</li> <li>OPOP</li> <li>聯想</li> <li>華為</li> <li>其他品牌</li> </ul> <button>更多</button> </div> </body> </html> <script type="text/javascript"> $(function(){ var str=$(".box li:gt(3):not(:last)"); //隱藏掉2個元素 str.css("display","none"); $("button").click(function(){ // $(".box li").css("display","block"); if(str.is(":visible")){ //is為檢查元素內容 str.css("display","none"); $("button").text("更多"); }else{ str.css("display","block"); $("button").text("收起"); } }) }) </script> ``` 效果： ![](https://img.kancloud.cn/3f/f7/3ff733e6051c97fc6ae32390cc9c203f_1070x345.png) ![](https://img.kancloud.cn/92/56/925625437935d22d3933313a5675f1e0_1101x301.png)