Question

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

CSS：

#container ul {
height:400px;
margin: 1em 0 0 0;
padding: 0;
position: relative;
overflow: hidden;
}

#container ul li {
display: none;
min-height: 90px;
font: 0.9em/1.25em Arial, Helvetica, sans-serif;
color: #121c39;
padding: .5em;
border-bottom: 1px dotted #121c39;
background: transparent;
overflow: hidden;
}

#container ul li span {
display: block;
font: bold 1.125em Arial, Helvetica, sans-serif;
}

#container ul li a {
display: block;
color: #121c39;
}

HTML：

   <div class="fourcol">
        <div id="container">
            <a href="#" id="up">Up</a>
            <a href="#" id="down">Down</a>
          <h2>New Arrivals</h2>
          <ul>
            <li><span>Gun 1</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 2</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 3</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 4</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 5</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 6</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
          </ul>
    </div>

和JS

$('#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();
});

我可以让ul只用这个显示前4个（或者其他任何一个）

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

我希望ul只显示4个项目并滚动浏览，一次只显示4个并按顺序排列。如何在每次点击时应用$（＆＃39; #container＆gt; ul＆gt; li：lt（4）＆＃39;）....

Answer 1

您需要使用JS来跟踪一次显示的li个。不同高度的CSS解决方案似乎不可能。像这样：

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

没有固定高度的滚动列表

1 个答案: