javascript - jqueryのslideDown関数を制限しますか？

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>

方法の 1 つは、いくつかの行をラップすることです。

<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

複数の要素を上下にスライドさせる 1 つの方法:

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で）