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/