限制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> 

的方式之一，是包裝一些行：

<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"); 
}); 

當您點擊與類列表中，您得到他所有的孩子股利然後切片只能從0到5並顯示出來。您可以進一步修改這個，如果你有你不感興趣隱藏不同類別或那些孩子等

這裏的小提琴：http://jsfiddle.net/mgrcic/YHhDp/和JS斌下滑和幾個要素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）