jQuery的隱藏和第n項後顯示列表項

Question

說我有一個無序列表，就像這樣：

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

我將如何，使用JQuery，隱藏最後2列表項，並有一個「顯示更多」鏈接那裏，所以當點擊時，最後2個列表項會出現？

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li style="display:none;">Four</li> 
    <li style="display:none;">Five</li> 
    <li>Show More</li> 
</ul> 

Answer 1

試試下面的代碼示例：

$('ul li:gt(3)').hide(); 
$('.show_button').click(function() { 
    $('ul li:gt(3)').show(); 
}); 

Answer 2

我假設你開始與UL按你的示例代碼。

我會發現UL和隱藏項目比您最初想要顯示的最後一個項目的索引更大。然後，我會添加一個新項目作爲顯示其餘的鉤子。最後，我會隱藏更多選項，因爲它不再需要。

請參閱以下內容：

$('ul li:gt(3)') 
.hide() 
.parent() 
.append('<li onclick="$(this).parent().find(''li:gt(3)'').show();$(this).hide();">Show more</li>'); 

Answer 3

爲了好玩，這裏是一個迂迴的方式來做到這一點的一個鏈條：

$('ul') 
    .find('li:gt(3)') 
    .hide() 
    .end() 
    .append(
    $('<li>Show More...</li>').click(function(){ 
     $(this).siblings(':hidden').show().end().remove(); 
    }) 
); 

Answer 4

它會更喜歡這樣。您必須隱藏大於2的兒童，因爲Three的索引爲2.另外，如果您想將Show More顯示在LI標記中，則需要在選擇器中包含:not(:last-child)。像這樣：

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
<li><a href=# class=show>Show More</a></li> 
</ul> 
<script>$("li:gt(2):not(:last-child)").hide(); 
$('.show').click(function(){ 
$("li:gt(2)").show(); 
}); 
</script> 

Answer 5

我只是想顯示「顯示/隱藏」如果大於max，所以我這樣做，以下肯：

$('ul').each(function(){ 
    var max = 6 
    if ($(this).find("li").length > max) { 
    $(this) 
     .find('li:gt('+max+')') 
     .hide() 
     .end() 
     .append(
     $('<li>More...</li>').click(function(){ 
      $(this).siblings(':hidden').show().end().remove(); 
     }) 
    ); 
    } 
}); 

Answer 6

繼肯和雲，我加了規定「更多」按鈕可以變成「更少」並切換相關的列表項目。

$('.nav_accordian').each(function(){ 
    var max = 6 
    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="show_less">(see less)</span>'); 
      } else { 
       $(this).html('<span class="show_more">(see more)</span>'); 
      }; 
     }); 
    }; 
}); 

Answer 7

您可以嘗試Show First N Items jQuery Plugin。所有你需要寫的是：

<ul class="show-first" data-show-first-count="3"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

它會自動轉換成這樣：

<ul class="show-first" data-show-first-count="3"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li><a href="#" class="show-first-control">Show More</a></li> 
    <li style="display: none;">Four</li> 
    <li style="display: none;">Five</li> 
</ul> 

而且點擊查看更多之後，它會轉換到這一點：

<ul class="show-first" data-show-first-count="3"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li style="display: none;"><a href="#" class="show-first-control">Show More</a></li> 
    <li style="display: list-item;">Four</li> 
    <li style="display: list-item;">Five</li> 
</ul> 

據透露，我向這個插件貢獻了代碼。