javascript - 仅隐藏和显示直接子项的第 n 项之后的 div 列表项

Question

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

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 的子列表

Answer 1

为您想要依赖的列表元素提供一个类应该可以解决您的问题:

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

在你的JS中你会计算“.list__element”，就像这样:

if ($(this).find('.list__element').length > max) {
...
}