限制在UI元素中

Question

显示的项目在这里是我的代码，以限制在ul可见列表中的项目数量：

$wnd.$(el) 
    .find('li:gt(9)') 
    .hide() 
    .end() 
    .append(
    $wnd.$('<li>+More</li>').click(function(){ 
     $wnd.$(this).siblings(':hidden').show().end().remove(); 
    }) 
); 

当+More点击它会立即显示所有项目。

我应该在代码中的添加时+More点击它不会显示一切还没有，只是接下来的10个项目？然后，当显示的所有项目，一个+Less选项应显示只显示前10个项目，因为它是以前。

Answer 1

这是一个奇怪的语法，但这样的事情也许

$wnd.$(el) 
    .find('li:gt(9)') 
    .hide() 
    .end() 
    .append(
     $wnd.$('<li>+More</li>').click(function() { 
      $wnd.$(this).remove().siblings(':hidden').slice(0, 10).show(); 

      if ($wnd.$(el).find('li:hidden').length === 0) { 
       $wnd.$(el).append(
        $wnd.$('<li>+Less</li>').click(function() { 
         $wnd.$(el).find('li:gt(9)').hide(); 
        }) 
       ) 
      } 
     }) 
    ); 

Answer 2

这个怎么样？ https://jsfiddle.net/0hyL9ngr/

HTML

<ul id='some-list'> 
    <li class='list-item'>1</li> 
    <li class='list-item'>2</li> 
    <li class='list-item'>3</li> 
    ... 
    <li class='list-item'>39</li> 
    <li class='list-item'>40</li> 
    <li class='list-item'>41</li> 
    <li id='show-more'>More</li> 
    <li id='show-first-ten'>Less</li> 
</ul> 

的JavaScript

$('#show-more').on('click', function() { 
    $('.list-item:hidden:lt(10)').show(); 
    if ($('.list-item:hidden').length == 0) { 
    $(this).hide(); 
    $('#show-first-ten').show(); 
    } 
}); 

$('#show-first-ten').on('click', function() { 
    $('.list-item:gt(9)').hide(); 
    $(this).hide(); 
    $('#show-more').show(); 
}); 

CSS

#show-more { 
    cursor: pointer; 
} 

#show-first-ten { 
    display: none; 
    cursor: pointer; 
} 

.list-item:nth-child(n+11) { 
    display: none; 
} 

Answer 3

这是一种方式：

$('li:gt(9)') 
     .hide() 
     .parent() 
     .append( 
      $('<li>more</li>').on('click', function() {    
       var el = $(this).siblings(':hidden'); 

       if (el.length) el.slice(0, 10).show();     
       else $('li:gt(9)').not(this).hide(); 

       $(this).text($(this).siblings(':hidden').length ? 'more' : 'less');     
      }) 
     ); 

FIDDLE