在网页开发中，常常需要实现导航或列表栏的收缩功能，这时可以使用jQuery中的li收缩效果来实现。

首先，需要在HTML中定义一个ul列表，每个li元素表示一个选项或者子菜单。以下是一个例子：

<ul id="my-list">
<li>选项1</li>
<li>选项2
<ul>
<li>子选项1</li>
<li>子选项2</li>
</ul>
</li>
<li>选项3</li>
</ul>

接下来，在jQuery中定义一个事件监听器，在点击某个li元素时展开或者收缩子菜单。以下是一个简单的实现：

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

以上代码使用了slideToggle()方法来实现收缩效果，当点击li元素时，它的子元素ul将展开或者收缩。

如果需要实现只展开一个子菜单的效果，可以在事件监听器中使用siblings()方法来查找其他li元素，并关闭它们的子菜单：

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

以上代码在展开当前li元素的子菜单时，将同级的其他li元素的子菜单收缩。这样，每次只有一个子菜单是展开的。

总之，使用jQuery的li收缩效果可以很方便地实现导航或者列表栏的收缩功能，提升网站的用户体验。