Jquery 无固定高度的滚动列表

我有一个固定高度的ul。单击时，有两个按钮（#向上）和（#向下）可滚动浏览其余元素。我想删除ul上的固定高度，以允许每个li中的副本长度不同（目前允许3个li，最大高度为90px）。当定义了ul的高度和li的最大高度时，它工作，移除它们会显示超过所需的（4）li量

CSS:

HTML:

我可以让ul用这个只显示前4个（或任何李的）

$('#container > ul > li:lt(4)').show();

---

我希望ul只显示4个项目并滚动浏览，一次只显示4个项目并保持它们的顺序。如何应用$（“#container>ul>li:lt（4）”。。。。每次单击？

您需要使用JS跟踪一次显示的

li

s的数量。CSS解决方案似乎不可能具有不同的高度。大概是这样的：

//after up/down clicks:
$("li:gt(3)").hide();

$('#up').click(function(e){
    var first = $('#container ul li:first');
    first.hide('fast',function(){
        $('#container ul').append(first.show(500));
    });
    e.preventDefault();
});
$('#down').click(function(e){
    var last = $('#container ul li:last');
    last.hide('fast',function(){
    $('#container ul').prepend(last.show(500));
   });
   e.preventDefault();
});

$('#container > ul > li:lt(4)').show();

//after up/down clicks:
$("li:gt(3)").hide();