在網(wǎng)頁開發(fā)中，常常需要實(shí)現(xiàn)導(dǎo)航或列表欄的收縮功能，這時(shí)可以使用jQuery中的li收縮效果來實(shí)現(xiàn)。

首先，需要在HTML中定義一個(gè)ul列表，每個(gè)li元素表示一個(gè)選項(xiàng)或者子菜單。以下是一個(gè)例子：

<ul id="my-list">
<li>選項(xiàng)1</li>
<li>選項(xiàng)2
<ul>
<li>子選項(xiàng)1</li>
<li>子選項(xiàng)2</li>
</ul>
</li>
<li>選項(xiàng)3</li>
</ul>

接下來，在jQuery中定義一個(gè)事件監(jiān)聽器，在點(diǎn)擊某個(gè)li元素時(shí)展開或者收縮子菜單。以下是一個(gè)簡單的實(shí)現(xiàn)：

$('ul li').click(function(){
$(this).children('ul').slideToggle();
});

以上代碼使用了slideToggle()方法來實(shí)現(xiàn)收縮效果，當(dāng)點(diǎn)擊li元素時(shí)，它的子元素ul將展開或者收縮。

如果需要實(shí)現(xiàn)只展開一個(gè)子菜單的效果，可以在事件監(jiān)聽器中使用siblings()方法來查找其他li元素，并關(guān)閉它們的子菜單：

$('ul li').click(function(){
$(this).children('ul').slideToggle();
$(this).siblings().children('ul').slideUp();
});

以上代碼在展開當(dāng)前l(fā)i元素的子菜單時(shí)，將同級(jí)的其他li元素的子菜單收縮。這樣，每次只有一個(gè)子菜單是展開的。

總之，使用jQuery的li收縮效果可以很方便地實(shí)現(xiàn)導(dǎo)航或者列表欄的收縮功能，提升網(wǎng)站的用戶體驗(yàn)。