javascript - Limit slideDown function in jquery?

Question

I have a list of lines of html. They look something like this.

<div class="list">
<div class="line"></div>
...
</div>

I call the jquery function slideDown() to show the lines. What I would like to be able to do is limit how many lines it displays. How can I do that?

Answer 1

此代码将向下滑动所有列表：

<script>
    $( document ).ready( function() {
        $( '.list' ).click( function() {
            $( this ).slideDown( 'slow' );
        });
    });
</script>

其中一种方法是包装一些行：

<div class="list">
    <div class="list-wrapper">
        <div class="line"></div>
        ...
    </div>
    <div class="line"></div>
    ...
</div>
<script>
    $( document ).ready( function() {
        $( '.list' ).click( function() {
            $( this ).find( '.list-wrapper' ).slideDown( 'slow' );
        });
    });
</script>

Answer 2

很简单的东西：

HTML

<div class="list"> Click me!
<div class="line">One</div>
<div class="line">Two</div>
<div class="line">Three</div>
<div class="line">Four</div>
<div class="line">Five</div>
<div class="line">Six</div>
<div class="line">Seven</div> 
</div>​

CSS

.list{
 border: 1px solid;
 height: 20px;
 width: 100px;
}

.line
{
 display:none;
}​

JS

$(".list").click( function() {
    $(this).children().slice(0, 5).slideDown("slow");
});

当您单击带有类列表的 div 时，您会得到他所有的孩子，然后仅从 0 到 5 切片并显示它们。如果您有不同班级的孩子或您不想隐藏的孩子等，您可以进一步修改此设置。

这是小提琴： http: //jsfiddle.net/mgrcic/YHhDp/和 JS Bin http://jsbin.com/3/omequg/edit?html,css,javascript,live

Answer 3

向下和向上滑动几个元素的一种方式：

function rollOut(count, time, justVisible) {
    justVisible = justVisible !== undefined ? justVisible : true;
    $(".list > .line").each(function(a, e) {
        e = $(e);
        if (a < count) {
            console.log(a, e);
            if (e.is(":visible") || e.attr("data-was-visible") == "true") e.attr("data-extend", true);
            else if (!justVisible) count++;
        }
        console.log(count);
    });
    $(".list").children(".line[data-extend=true]").slideDown(time);
}

function rollUp(time) {
    $(".list > .line").each(function(a, e) {
        var e = $(e);
        e.attr("data-was-visible", e.is(":visible"));
    });
    $(".list").children(".line").slideUp(time, function() {
        $(".list > .line").attr("data-extend", false);
    });
}

这是一个小提琴： http: //jsfiddle.net/WbTjK/（使用我的前海报的html）