展開具有使用jQuery

Question

我已經顯示5行文字，一個下面的另一個像這樣它的內容的預覽一個div：

1）行一個
2）兩線
3）第三行
4）四線
5）5

但只有顯示第一2線的特殊要求線，並且有一定的種jquery的魔法，將隱藏線3-> 5，並且當顯示它們用戶單擊向下箭頭或類似的控件。我怎樣才能做到這一點？

感謝

Answer 1

你需要的東西是這樣的： HTML：

<ul> 
    <li class="line">Line one</li> 
    <li class="line">Line two</li> 
    <li class="line">Line three</li> 
    <li class="line">Line four</li> 
    <li class="line">Line five</li> 
    <li class="showMore">Show More</li> 
</ul> 

CSS：

.line:nth-child(n+3) { 
    display:none; 
} 
.showMore{ 
    cursor:pointer; 
    font-size:12px; 
    color:blue; 
} 

JQuery的：

$(document).ready(function() { 
    $('.showMore').click(function() { 
     $('ul li:gt(1)').show(); 
     $(this).hide(); 
    }); 
}); 

Answer 2

在這裏，您可以在2種方式做。 1-只顯示2行和觸發「更多」點擊更多，加載其餘3行使用jquery和顯示全部5.

2-打印所有5但設置div的高度只出現2. on點擊更多更改高度從25px到100px。