Question

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

HTML代码：

<ul class="nav_accordian">
  <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>

脚本文件：

$('.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="showMore">show 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>');
            };
        });
    };
});

当我点击“显示更多”时，我确实应该看到列表项的所有结果。一旦每个结果加载“显示更多”文本将在“更少”上更改。

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

问题是脚本只考虑我做的直接子列表，当我点击“显示更多”时，它应显示列表项的下五个结果。一旦每个结果加载“显示更多”文本将在“更少”上更改。

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

但是我的剧本也考虑到了李子，但我不想要

我预计输出为：

一个

2

3

4

5

显示更多

Answer 1

每当您想要定位第一级孩子时，请尝试使用>子选择器。

if ($(this).find('> li').length > max) {
//----------------^
        $(this).find('> li:gt('+max+')').hide().end().append('<li ....
//--------------------^

DEMO

Answer 2

从你的解释我感到困惑......但作为贡献，这是我做的代码...... HTML：

<ul class="nav_accordian">
 <li>One
  <ul>
   <li>on 1.1</li>
   <li>on 1.2</li>
   <li>on 1.3</li>
  </ul>
 </li>
<li>Two
 <ul>
   <li>on 2.1</li>
   <li>on 2.2</li>
   <li>on 2.3</li>
  </ul>
 </li>
 <li>Three
  <ul>
   <li>on 3.1</li>
   <li>on 3.2</li>
   <li>on 3.3</li>
  </ul>
 </li>
</ul>

*对于缩进感到抱歉。

jQuery的：

$('.nav_accordian > li').each(function(){
  $(this).children('ul').hide();
  $(this).append('<li class="sub_accordian"><span class="showMore">show More</span></li>');//.children().hide();
}); 

$(document).on('click','.sub_accordian', function(){
  $(this).siblings().toggle();
  if ( $('.show_more').length ) {
    $(this).html('<span class="showMore">show More</span>');
  } 
  else {
    $(this).html('<span class="showMore">less More</span>');
  }
});

如何在第n项

2 个答案:

DEMO