Question

我有一个html行列表。他们看起来像这样。

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

我调用jquery函数slideDown（）来显示这些行。我希望能够做的是限制它显示的行数。我怎么能这样做？

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）

在jquery中限制slideDown函数？

3 个答案: