JavaScript：向下滑動UL到最後一個元素

Question

想不到如何最好地做到這一點。認爲這將是一個簡單的展示/隱藏，但它似乎不那麼簡單。

有一個UL中有不確定數量的項目。它需要能夠顯示前10個，但不能再單擊「顯示更多」按鈕。當點擊「顯示更多」按鈕時，它將展開列表以顯示完整列表。

http://jsfiddle.net/kbUhW/

有興趣看看這是如何實現的。

Answer 1

下面是一個例子：

JS：

count = 0; 
$('ul li').hide(); 
$('ul').children().each(function(){ 
    if(count >= 10) return; 
    $(this).show(); 
    count++; 
}) 

$('.slide').click(function(){$('ul li').show('blind');}) 

HTML：

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

<a href="#" class='slide'>Slide Down</a> 

Answer 2

下面是與滑動向下效果：

http://jsfiddle.net/deNzh/

這就是你要找的東西，對吧？

Answer 3

，你可以指定喜歡<李類=「always_show」的前十< LI> SA類>的東西放在這裏</LI>，然後讓隱藏了所有的腳本，顯示「always_show」級和等待按鈕點擊顯示整個事情。

可能看起來像：

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $("#listorama").hide(); 

}); 
$(function(){ 
    $(".always_show").show(); 

}); 
$(function(){ 
    $("#show_all").click(function(){ 
     $("#listorama").show(); 
    }); 

}); 
</script> 

    <ul id="listorama"> 
     <li class="always_show"></li>  
     <li class="always_show"></li> 
     <li class="always_show"></li> 
     <li class="always_show"></li> 
     <li class="always_show"></li> 
     <li class="always_show"></li> 
     <li class="always_show"></li> 
     <li class="always_show"></li> 
     <li class="always_show"></li> 
     <li class="always_show"></li> 
     <li>stuff to hide first</li> 
     <li>stuff to hide first</li> 
     <li>stuff to hide first</li> 
     <li>stuff to hide first</li> 
     <li>stuff to hide first</li> 
</ul> 

<button id="show_all">Show All</button> 

希望這有助於！

安迪

Answer 4

function toggleListDisplay (list, cap) { 
    cap = parseInt(cap); 
    if (cap == null || cap < 0) { return; } 
    var elements = $(list).children(); 
    if ($(elements[cap]).css('display') == 'none') { 
     // means we need to expand the list 
     elements.each(function(ind, ele) { 
      if (ind >= cap) { $(ele).slideDown(); } 
     }); 
     $('.slide').html('Slide Up'); 
    } else { 
     // means we need to shorten the list 
     elements.each(function(ind, ele) { 
      if (ind >= cap) { $(ele).slideUp(); } 
     }); 
     $('.slide').html('Slide Down'); 
    } 
} 

$('.slide').click(function(){ 
     toggleListDisplay('#tester', 10); 
}) 

toggleListDisplay('#tester', 10); 

的jsfiddle：http://jsfiddle.net/WqxGf/7/

Answer 5

我不知道爲什麼有人覺得喜歡做這樣一個簡單的任務比它更復雜的，但這裏是一個容易得多，短，實現這一目標的更簡單的方法：

$("a").click(function() { 
    var ul = $("#myid"); 
    ul.animate({"height": ul[0].scrollHeight}, 1000); 
}); 

例子：http://jsfiddle.net/kbUhW/13/

Answer 6

所有其他答案使用jQuery，但你的問題並沒有真正指定它。所以這裏有一個用普通JavaScript來做的方法。假設您的<ul>的ID爲foo，您的「揭示」鏈接的ID爲reveal，並且有hide和display: none。然後我們有：

(function getChildNodes(id, num) { // ID of element, number to show 
    var obj = document.getElementById(id), 
    children = obj.childNodes, 
    elemcounter = 0; 
    for (var i = 0; i < children.length; i++) { // loop all children 
    if (children[i].nodeType === 1) { // examine elements only 
     elemcounter++; 
     if (elemcounter > num) { // element number in range to hide? 
     children[i].className = 'hide'; 
     } 
    } 
    } 
}('foo', 3)); // id foo, show 3 

document.getElementById('reveal').onclick = function() { // handle click 
    var items = document.getElementsByTagName('li'); 
    for(var i = 0; i < items.length; i++){ // for all list elements... 
    var tempclass = items[i].className; 
    // if the class is "hide", unhide 
    items[i].className = tempclass === 'hide' ? '' : tempclass; 
    } 
} 

當然還有很多其他的方法來更徹底地做到這一點 - 而這其中甚至不滑動。 jQuery確實讓生活變得更輕鬆。

這裏的工作示例：http://jsfiddle.net/redler/jsQ47/