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 > 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

Answer 2

您可以使用点击处理程序，例如

$('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>

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

2 个答案:

DEMO