<!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>
