Question

无法想到如何做到这一点。认为这将是一个简单的显示/隐藏，但它似乎并不像那样简单。

UL中有不确定数量的物品。除非单击“显示更多”按钮，否则它需要能够显示前10个但不能显示。单击“显示更多”按钮后，它将展开列表以显示完整列表。

有兴趣了解这是如何实现的。

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

所有其他答案都使用jQuery，但您的问题实际上没有指定它。所以这是使用纯JavaScript实现它的一种方法。假设您的<ul>标识为foo，您的“显示”链接标识为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/

Answer 3

这是滑动效果：

http://jsfiddle.net/deNzh/

这就是你要找的，对吗？

Answer 4

你可以指定前十个＆lt; li＆gt; s类似＆lt; li class =“always_show”＆gt;东西到这里＆lt; / li＆gt;然后创建一个隐藏所有内容的脚本，显示“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 5

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 6

我不知道为什么其他人觉得让这么简单的任务比现在更复杂，但这是一种更简单，更简单，更简单的方法：

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

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

JavaScript：将UL向下滑动到最后一个元素

6 个答案: