jquery slideDown和slideUp（）不適用於部分顯示

Question

是否有可能顯示和隱藏部分jQuery滑動功能？

基本上，有一個包含7個項目的列表。但是隻有前兩個最初顯示，其餘的都隱藏起來。我希望當用戶點擊查看更多時，應顯示所有7個項目。當他/她再次點擊時，只有前兩個顯示，其餘的再次隱藏。但我無法做到這一點。請給我點亮，謝謝。

的jQuery：

var ul = $('ul'), 
    showMoreLnk = $('a.show-more'); 

$('a').click(function(e){ 

    if(ul.outerHeight() === 38){ 
    ul.find('li.hide').removeClass('hide').addClass('show'); 

    ul.slideDown(function(){ 
     showMoreLnk.text('Show less'); 
    }); 

    } else { 
    ul.slideUp(function(){ 
     showMoreLnk.text('Show more'); 
     ul.find('li.show').removeClass('show').addClass('hide'); 
    }); 
    } 

    e.preventDefault(); 

}); 

HTML：

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li class="hide">Item 3</li> 
    <li class="hide">Item 4</li> 
    <li class="hide">Item 5</li> 
    <li class="hide">Item 6</li> 
    <li class="hide">Item 7</li> 
</ul> 
<a href="#" class="show-more">show more</a> 

CSS：

.hide{ 
    display: none; 
} 
.show{ 
    display: block; 
} 

Answer 1

試試這個：

$('a').click(function (e) { 
     e.preventDefault(); 
     $('ul li.hide').slideToggle('slow'); 
}); 

Answer 2

檢查了這一點。 http://sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/

和示例： http://sim.plified.com/jQuery/slide/#

Answer 3

看看這個代碼：

$('a.show-more').click(function (e) { 
    e.preventDefault(); 

    var hidden_list = $('ul li.hide'); 

    if (hidden_list.is(':hidden')) { 
     $(this).html("show less"); 
     hidden_list.slideDown(); 
    } 
    else { 
     $(this).html("show more"); 
     hidden_list.slideUp(); 
    } 
}); 

我也創造了這個給你的小提琴http://jsfiddle.net/Shanison/H4vbB/2/

測試