效果描述
2. 當點擊 “顯示全部品牌” 時其余內容顯示出來，此時按鈕的文字變為 “精簡品牌”，如下：
3. 點擊 “精簡品牌” 時內容再次被隱藏，如下：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
<li><a href="#">22</a></li>
<li><a href="#">更多</a></li>
</ul>
<div class="showmore">
<span><a href="#">顯示全部品牌</a></span>
</div>
</div>
</body>
*{
margin: 0;
padding: 0;
}
.container{
width: 500px;
height: 200px;
border: 1px solid #333;
margin: 20px auto;
}
ul{
list-style: none;
width: 100%;
overflow: hidden; //清除浮動，讓ul的高度隨內容的改變而改變。
padding: 5px;
margin-top: 20px;
}
ul li{
float: left;
text-align: center;
height: 20px;
width: 68px;
}
.showmore{
width: 125px;
height: 30px;
border: 1px solid #000;
margin: 0 auto;
text-align: center;
line-height: 30px;
}
.select{
text-decoration: none;
color: #333;
}
<script type="text/javascript">
$( function(){ //等待DOM加載完畢
var $show = $( 'ul li:gt( 7 ):not(:last)' ); //獲取索引大於 7 的品牌（除最後一個）
$show.hide(); //隱藏上面選取的元素
var btn = $('.showmore span > a'); //獲取按鈕
btn.click(function(){ //給按鈕添加點擊實踐
if($show.is(":visible")){ //如果元素顯示，則進行以下操作
$show.hide();
$('.showmore span a').text('顯示全部品牌');
$('ul li a').removeClass('select');
}else{ //如果元素隱藏，進行以下操作
$show.show();
$('.showmore span a').text('精簡品牌');
$('ul li a').filter(":contains('7'), :contains('13'), :contains('17')")
.addClass('select');
}
return false;
})
} )
</script>
jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm
jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm
《jQuery即學即用（雙色）》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm
鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm
jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm
jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm
--------------------------------------分割線 --------------------------------------
jQuery 的詳細介紹：請點這裡
jQuery 的下載地址：請點這裡