4

我有一个div带有ul列表的框，我想li在彼此下方显示 3 个项目，然后slide/toggle从我的列表中显示另外 3 个项目。

例如，在我的项目中，ul我将有 9li个项目，但我首先只显示 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>
4

3 回答 3

5 

$('.itemsList').each(function() {
  
  const group = 3; // group 3 by 3
  const $items = $(this).find('li');
  const $btns = $(this).find('.prev, .next');
  const max = Math.ceil($items.length / group);
  let c = 0;
  
  function showItems(ev) {
    c = c<0 ? max-1 : c%max;
    $items.hide().slice(group*c, group*c+group).show();
  }
  
  $btns.on('click', function() {
    $(this).is('.next') ? ++c : --c;
    showItems();
  });
  
  showItems(); // init
});
<div class="itemsList">
  <ul id="myList">
    <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>
  <button type="button" class="prev">prev</button>
  <button type="button" class="next">next</button>
</div>

<div class="itemsList">
  <ul id="myList">
    <li>item 1 (Example with 5 items)</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>
  <button type="button" class="prev">prev</button>
  <button type="button" class="next">next</button>
</div>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

于 2012-07-21T01:16:41.170 回答
1

这样的事情怎么样

jsFiddle在这里

$('#next').click(function(){
    var index = $('ul li:visible').last().index() +2
    $('ul li:visible').slideUp().last().nextUntil(':nth-child('+index+'n+3)').slideDown();
})
于 2012-07-21T00:41:45.693 回答
0

您可以执行以下操作：

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），然后确定要切片的开始和结束索引。

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

希望能帮助到你 ：）

于 2012-07-21T00:31:06.717 回答