在第 n 项之后隐藏和显示 div 的列表项

Question

假设我有一个无序列表，如下所示：

HTML 代码：

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
   <li>One 1</li>
   <li>Two 2</li>
   <li>Three 3</li>
   <li>Four 4</li>
   <li>Five 5</li>
   <li>One 11</li>
   <li>Two 22</li>
   <li>Three 33</li>
   <li>Four 44</li>
   <li>Five 55</li>
</ul>

我将如何使用 jquery 或 javascript，只显示前五个列表项并在那里有一个“显示更多”文本，所以当点击时，接下来的五个列表项会出现？

脚本：

$('ul').each(function(){
    var max = 4
    if ($(this).find('li').length > max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="show_more">(see more)</span></li>');
        $('.sub_accordian').click( function(){
            $(this).siblings(':gt('+max+')').toggle();
            if ( $('.show_more').length ) {
                $(this).html('<span class="show_less">(see less)</span>');
            } else {
                $(this).html('<span class="show_more">(see more)</span>');
            };
        });
    };
});

当我点击“显示更多”时，接下来的五个结果应该是可见的。加载每个结果后，“显示更多”文本将更改为“更少更多”。

当我点击“更少更多”按钮时，第一个结果应该是可见的，其他列表项应该被隐藏，“更少更多”文本更改为“显示更多”

Answer 1

您可以使用类似的点击处理程序

$('ul').has('li:nth-child(6)').append('<li class="more">Show more</li><li class="less">Show less</li>');

$('ul .more').click(function() {
  $(this).next().show();
  var $nexts = $(this).parent().children('li:not(.more, .less):visible:last').nextAll(':not(.more, .less)');
  $nexts.slice(0, 5).show();
  $(this).toggle($nexts.length > 5);
});
$('ul .less').click(function() {
  $(this).prev().show();
  var $curr = $(this).parent().children('li:not(.more, .less):visible');
  var num = $curr.length % 5 || 5;
  $curr.slice(-num).hide();
  $(this).toggle($curr.length > 10);
});

li:nth-child(n+6):not(.more) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>One 1</li>
  <li>Two 2</li>
  <li>Three 3</li>
  <li>Four 4</li>
  <li>Five 5</li>
  <li>One 11</li>
  <li>Two 22</li>
  <li>Three 33</li>
  <li>Four 44</li>
  <li>Five 55</li>
  <li>Extra</li>
</ul>

---

如果您希望一次只有一个导航按钮可用

var $uls = $('ul').has('li:nth-child(6)').append('<li class="more">Show more</li>');

$uls.on('click', '.more', function() {
  var $nexts = $(this).parent().children('li:not(.more):visible:last').nextAll(':not(.more)');
  $nexts.slice(0, 5).show();
  if ($nexts.length <= 5) {
    $(this).toggleClass('more less').text('Show less')
  }
});
$uls.on('click', '.less', function() {
  var $curr = $(this).parent().children('li:not(.less):visible');
  var num = $curr.length % 5 || 5;
  $curr.slice(-num).hide();
  if ($curr.length <= 10) {
    $(this).toggleClass('more less').text('Show more')
  }
});

li:nth-child(n+6):not(.more):not(.less) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>One 1</li>
  <li>Two 2</li>
  <li>Three 3</li>
  <li>Four 4</li>
  <li>Five 5</li>
  <li>One 11</li>
  <li>Two 22</li>
  <li>Three 33</li>
  <li>Four 44</li>
  <li>Five 55</li>
  <li>Extra</li>
</ul>

Answer 2

您可以使用ul > li:not(":visible"):lt(5) 选择器，如下所示。

$('.show_more').click(function() {
  if ($(this).text() == 'see more') {
    $('.parent > li:not(":visible"):lt(5)').show();
  } else {
    $(this).text('see more');
    $('.parent > li:gt(4)').hide();
  }

  var notVisible = $('.parent > li:not(":visible")').length;

  if (notVisible == 0) {
    $(this).text('see less');
  }
}).click();

.parent > li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="parent">
  <li>One
    <ul>
      <li>on 1.1</li>
      <li>on 1.2</li>
      <li>on 1.3</li>
    </ul>
  </li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>One 1</li>
  <li>Two 2</li>
  <li>Three 3</li>
  <li>Four 4</li>
  <li>Five 5</li>
  <li>One 11</li>
  <li>Two 22</li>
  <li>Three 33</li>
  <li>Four 44</li>
  <li>Five 55</li>
</ul>
<span class="show_more">see more</span>

DEMO