当使用jquery单击显示更多按钮时，如何显示下一个x limit li

Question

我有以下脚本，工作完美。它只显示第一个x元素li，点击后显示更多它显示全部。如何点击显示更多按钮，我需要x元素显示，下一个x元素显示和soo这里是我的代码

$('.tabNav ul').each(function() {
  var LiN = $(this).find('li').length;
  if (LiN > 3) {
    $('li', this).eq(5).nextAll().hide().addClass('toggleable');
    $(this).append('<li class="more">More...</li>');
  }
});

$('.tabNav ul').on('click', '.more', function() {
  if ($(this).hasClass('less')) {
    $(this).text('More...').removeClass('less');
  } else {
    $(this).text('Less...').addClass('less');
  }
  $(this).siblings('li.toggleable').slideToggle();
});

非常感谢您的帮助。

Answer 1

以下是关于如何使用slice使用步骤进行切换的想法。

var step_nbr = 2;
var min_nbr = 6;

$('.tabNav ul').each(function() {
  var LiN = $(this).find('li').length;
  if (LiN > 3) {
    $('li', this).eq(5).nextAll().hide().addClass('toggleable');
    $(this).append('<li class="more">More...</li>');
  }
});

$('.tabNav ul').on('click', '.more', function() {
  var visible_lis = $('.tabNav ul li:visible').length;

  if ($(this).hasClass('less')) {

    $(this).prevAll('li:not(.toggleable)').slice(0, step_nbr).addClass('toggleable').hide();

    if ($('li:visible').length <= (min_nbr + 1)) {
      $(this).text('More...').removeClass('less');
    }

  } else {
    $(this).siblings('li.toggleable').slice(0, step_nbr).removeClass('toggleable').show();

    if ($('li.toggleable').length == 0) {
      $(this).text('Less...').addClass('less');
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabNav">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>