0

JSFiddle-固定高さ

JSFiddle-問題

高さが固定されたulがあります。クリックすると残りの要素をスクロールする2つのボタン（#up）と（#down）があります。ulの固定の高さを削除して、各liでコピーの長さを変えることができるようにします（現在、最大高さ90pxで3つのliを使用できます）。これは、liのulの高さとmax-heightが定義されている場合に機能し、それらを削除すると、必要な（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。CSSソリューションは、さまざまな高さでは不可能と思われます。このようなもの：

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