仅在直接子项的第 n 项之后隐藏和显示 div 的列表项答案

【问题标题】：Hide and show list items of divs after nth item of direct child only仅在直接子项的第 n 项之后隐藏和显示 div 的列表项
【发布时间】：2016-06-24 03:45:54
【问题描述】：

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

Demo

HTML 代码：

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

脚本文件：

$('.nav_accordian').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="showMore">show More</span>');
            } 
            else {
                $(this).html('<span class="showMore">less More</span>');
            };
        });
    };
});

我这样做是因为当我单击“显示更多”时，应该可以看到列表项的下五个结果。加载每个结果后，“显示更多”文本将更改为“更少更多”。

当我点击“更少更多”按钮时，第一个结果结果项目应该是可见的，其他项目将被隐藏。

问题是脚本也考虑了 li 的子列表

【问题讨论】：

“Less more”不是个好名字。 “少看”可能是。
@isherwood：我想显示前 5 个列表项，但我也被视为所有
子列表

<ul> <li class="list__element">One <ul> <li>on 1.1</li> <li>on 1.2</li> <li>on 1.3</li> </ul> </li> <li class="list__element">Two</li> <li class="list__element">Three</li> <li class="list__element">Four</li> <li class="list__element">Five</li> <li class="list__element">One 1</li> <li class="list__element">Two 2</li> <li class="list__element">Three 3</li> <li class="list__element">Four 4</li> <li class="list__element">Five 5</li> <li class="list__element">One 11</li> <li class="list__element">Two 22</li> <li class="list__element">Three 33</li> <li class="list__element">Four 44</li> <li class="list__element">Five 55</li> </ul> <span class="show_more">see more</span>