在網(wǎng)頁開發(fā)中，經(jīng)常需要使用到列表（ulli）來展示一些內(nèi)容，但有時(shí)候我們并不希望完全展示出所有的列表項(xiàng)，而是希望使用"收起"的功能進(jìn)行更好的呈現(xiàn)。下面介紹一種基于 jQuery 2.1 的展開收起效果。

首先，在HTML 中，我們需要用ul和li標(biāo)簽來創(chuàng)建列表：

<ul class="list">
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
<li>列表項(xiàng)4</li>
<li>列表項(xiàng)5</li>
</ul>

在CSS 中，需要給列表項(xiàng)設(shè)置一個(gè)初始高度，同時(shí)隱藏超出高度的部分：

.list li {
overflow: hidden;
height: 30px; /*設(shè)置列表項(xiàng)的高度*/
}

然后，在點(diǎn)擊鏈接時(shí)，使用 jQuery 選中所有列表項(xiàng)，進(jìn)行展開收起操作：

$(function(){
var list = $('.list'); //選中列表
var li = $('.list li'); //選中所有列表項(xiàng)
var num = 3; //每次展開的列表項(xiàng)個(gè)數(shù)
var total = li.length; //列表項(xiàng)的個(gè)數(shù)
list.height(li.outerHeight()*num); //初始時(shí)，列表的高度為3個(gè)列表項(xiàng)的高度
$('.more').click(function(){
if(list.height()< li.outerHeight()*total){ //如果列表項(xiàng)還沒有完全展示
list.animate({'height':'+='+li.outerHeight()*num }); //展開 num 個(gè)列表項(xiàng)
if(list.height() >= li.outerHeight()*total){
$('.more').text("收起");
}
} else {
list.animate({'height':'90px'}); //收起列表項(xiàng)
$('.more').text("查看更多");
}
});
});

以上代碼中，每次點(diǎn)擊鏈接會(huì)展開num個(gè)列表項(xiàng)，同時(shí)判斷是否展示完全。如未展示完全，則繼續(xù)展開，直到全部展示。反之，則折疊列表項(xiàng)。

在 HTML 中，需要添加一個(gè)"查看更多"的鏈接：

<a href="#" class="more">查看更多</a>

這樣，一個(gè)基于 jQuery 2.1 的展開收起列表的功能就完成了。