<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击展开全部</title> <style type="text/css"> ul li{ list-style: none; } </style> </head> <body> <div class="bigbox"> <ul> <li><a href="">aaa1</a><i>001</i></li> <li><a href="">aaa2</a><i>002</i></li> <li><a href="">aaa3</a><i>003</i></li> <li><a href="">aaa4</a><i>004</i></li> <li><a href="">aaa5</a><i>005</i></li> <li><a href="">aaa6</a><i>006</i></li> <li><a href="">aaa7</a><i>007</i></li> <li><a href="">aaa8</a><i>008</i></li> <li><a href="">aaa9</a><i>009</i></li> <li><a href="">aaa10</a><i>010</i></li> <li><a href="">aaa11</a><i>011</i></li> <li><a href="">aaa12</a><i>012</i></li> <li><a href="">aaa13</a><i>013</i></li> <li><a href="">aaa14</a><i>014</i></li> <li><a href="">aaa15</a><i>015</i></li> <li><a href="">aaa16</a><i>016</i></li> <li><a href="">aaa17</a><i>017</i></li> <li><a href="">aaa18</a><i>018</i></li> <li><a href="">aaa19</a><i>019</i></li> <li><a href="">其他</a><i>020</i></li> </ul> <div class="showmore"><a href="#"><span>显示全部</span></a></div> </div> </body> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ var yin=$('ul li:gt(10):not(:last)'); $(yin).hide(); var btn=$('.showmore >a '); $(btn).click(function(){ if($(yin).is(":visible")){ $(yin).hide(); $(this).find('span').css("background-color",'#ccc').text('显示全部'); }else{ $(yin).show(); $(this).find("span").css({'background-color':'#333','color':'#fff'}).text("收起"); $("ul li").filter(":contains('aaa15'),:contains('aaa16'),:contains('aaa17')").css('color','red') } return false; }) }) </script> </html>