Jquery 滑动切换列表以在关闭时仅显示列表的一部分

我有一长串物品
默认情况下，我只想显示它的一部分
并在单击按钮时显示所有项目

我有这个，但是如何使用jQuery slideToggle（）设置动画：

HTML:

JS:

---

你可以试试这样的

查看链接以了解更多信息

$（文档）.ready（函数（）{
$（“.expand”）。单击（函数（）{
如果（$（this）.text（）！=“关闭”）{
$（this.parent（）.children（“ul”）.removeClass（“closed”）；
$（此）.text（“关闭”）；
}否则{
$（this.parent（）.children（“ul”）.addClass（“closed”）；
$（此）.text（“打开”）；
}
});
});
li{
显示：继承；
}
.关闭{
最大高度：20px；
}
.滑块{
溢出y：隐藏；
最大高度：500px；/*近似最大高度*/
过渡性质：全部；
过渡时间：.5s；
过渡计时功能：三次贝塞尔（0,1,0.5,1）；
}


列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项

打开
设置li使用SlideUp SlideDown功能的动画

检查这个片段


$（文档）.ready（函数（）{
$（“.expand”）。单击（函数（）{
如果（$（this）.text（）！=“关闭”）{
$（this）.parent（）.children（“ul”）.find（“li:nth child（3）”）.nextAll（）.slideDown（函数（）{
});
$（此）.text（“关闭”）；
}否则{
$（this）.parent（）.children（“ul”）.find（“li:nth child（3）”）.nextAll（）.slideUp（函数（）{
});
$（此）.text（“打开”）；
}
});
});
li{
显示：继承；
}
.第li部分：类型（1n+4）的第n个{显示：无；}{
显示：无；
}
.褪色{
位置：相对位置；
}
.退色后{
内容：“；
位置：绝对位置；
z指数：1；
底部：0；
左：0；
指针事件：无；
背景图像：线性渐变（到底部，rgba（255，255，255，0），rgba（255，255，255，1）100%）；
宽度：100%；
高度：4em；
}


列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项

打开
谢谢你的建议。但是，如何使它从第三行上下滑动并平滑滑动，而不产生这种“跳跃”效果呢？@aleebek我已经更新了这个片段。请重新运行此代码段，以检查它是否会提供与您所需的相同的输出
<ul class="faded part">
  <li>List item</li>    
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
<button class="expand">Open</button>

.part li:nth-of-type(-n+3) {
  display: inherit !important;
}    
.part li {
  display: none;
}     

$(document).ready(function() {
  $(".expand").click(function() {
    if ($(this).text() != "Close") {
      $(this).parent().children("ul").removeClass("part");
      $(this).text("Close");
    } else {
      $(this).parent().children("ul").addClass("part");
      $(this).text("Open");
    }
  });
});