限制在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