💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
: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)