通過點擊某個元素顯示5 li's

Question

我有一個很大的ul列表與li項目。我想使用JavaScript，但我不知道如何。我怎樣才能做到這一點：

前5年的li是可見的。其餘的是隱藏的。當你點擊更多按鈕。每次點擊。它提供5到李氏的顯示。我在jsfiddle中製作html。

http://jsfiddle.net/FnBrx/

感謝您的幫助球員，

Answer 1

如何

$('li:gt(3)').hide();​​​​​​​​​​​​​​ 
$('.more').on('click', function(){ 
    $('li:visible:last').nextAll(':lt(4)').show(); 
}); 

FIDDLE

Answer 2

$('.more').click(function() { 
    $('li a:not(:visible)').slice(0,5).show().css('color','red'); 
    return false; 
});​ 

Updated Demo

.slice(0,5)減少匹配設置爲僅第一五行

Answer 3

你可以做這樣的事情

$('li').each(function(rowIndex){ 
    if(rowIndex<=5) 
     $(this).show(); 
    } 
else 
{ 
$(this).hide(); 
} 
}); 

，然後有一個按鈕和Click事件實現相同的功能。