1

我有一个无序列表，ul 本身没有设定高度，而 li 没有设定高度。我试图只显示 5 里并用向上/向下箭头循环它们。我遇到的问题是“向上”按钮。对于此示例，我有 6 个项目，在第六次单击“向上”时，它不再隐藏项目，而是简单地添加到它们，从而破坏了滑块的目的。

HTML

<div id="container">
            <a href="#" id="up">Up</a>
            <a href="#" id="down">Down</a>
          <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

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

1 回答 1

1

试试这个..实际上up你的onclick试图显示第一个li，而不是你需要显示第六个，所以添加了一行以仅显示索引为的那些li< 5

$('#container > ul > li:gt(4)').hide();
$('#up').click(function(e){
    var first = $('#container ul li:first');
    first.hide('fast',function(){
       $('#container ul').append(first);  //don't show the first one, just append it
       $('#container ul li:lt(5)').show(500); // add this line
       $('#container > ul > li:gt(4)').hide();
    });
    e.preventDefault();
});
$('#down').click(function(e){
    var last = $('#container ul li:last');
    last.hide('fast',function(){
       $('#container ul').prepend(last.show(500));
       $('#container > ul > li:gt(4)').hide();
    });
   e.preventDefault();
});
于 2012-12-04T05:47:28.563 回答