Question

我有一个div框，其中包含ul个列表，我想在彼此之下显示3个li项，然后slide / toggle另一个我列表中的3项。

例如，在我的ul中，我会有9个li个项目，但我首先只显示3个项目，然后点击下一个按钮我会接下来的三个项目，点击上一个按钮我会看到列表中的最后3个。

这可能吗？

我的示例代码：

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
</ul>

Answer 1

jsBin demo

// ======= EDIT HERE ===========
var $el = $('li');
var showN = 3;
// =============================
var elTot = $el.length;
var c = 0;
$('ul li').slice(showN).hide();
function toggle(){
   var cc= c<=-1 ? c=elTot-showN : c=c%elTot;
   $el.hide().slice(c,(c+showN)).show();
}
$('#prev, #next').click(function(){
  id = this.id==='next' ? (c+=showN) : (c-=showN);
  toggle();
});
// =============================

Answer 2

这样的事情

jsFiddle Here

$('#next').click(function(){
    var index = $('ul li:visible').last().index() +2
    $('ul li:visible').slideUp().last().nextUntil(':nth-child('+index+'n+3)').slideDown();
})

Answer 3

您可以执行以下操作：

var showNumber = 3;
var startPos = 0;
var endPos = showNumber;
var $List = $('ul li');
$List.hide().slice(startPos ,endPos).fadeIn();


$('a').click( function() {
    startPos = startPos + showNumber;
    endPos = endPos + showNumber;
    $List.hide().slice(startPos ,endPos).fadeIn();
    return false;
});

请参阅：http://jsfiddle.net/YURck/

基本上它的作用是，它设置一次显示的数量（showNumber），然后确定要切片的开始和结束索引。

要扩展它，您可以检查长度，以便在最后一组元素时隐藏“下一个”链接。

希望有所帮助：）

使用jQuery滑动3个项目

3 个答案:

jsBin demo