0

JSFiddle - 固定高度

JSFiddle - 问题

我有一个固定高度的 ul。有两个按钮 (#up) 和 (#down) 在单击时滚动浏览其余元素。我想删除 ul 上的固定高度，以允许每个 li 中不同长度的副本（目前它允许 3 li 的最大高度为 90px）。它在定义 ul 的高度和 li 的最大高度时起作用，删除它们显示超过所需的 (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 个（或任何 li 的）

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

我希望 ul 只显示 4 个项目并滚动浏览，一次只显示 4 个并保持它们的顺序。如何在每次点击时应用 $('#container > ul >li:lt(4)')....？

4

1 回答 1

1

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

//after up/down clicks:
$("li:gt(3)").hide();
于 2012-12-03T04:27:50.400 回答