Question

说我有一个无序列表，如下：

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>');
            };
        });
    };
});

当我点击“显示更多＆＃39;它应该在列表项的下五个结果中可见。一旦每个结果加载并显示更多＆＃39;文字将会更改“＃”;

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

问题是脚本是考虑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中，你会计算出＃34; .list__element＆＃34;，就像这样：

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

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

1 个答案: