は、そうのような別の以下つのIは、テキストの5行を表示する必要がjQueryの

Question

を使用して、そのコンテンツのプレビューを有するDIVを展開：

1）行を1
2）ライン2
3）ライン3
4）ライン4
5）ライン5

だけ最初の2行を表示する特別な要件とし、ラインの3-> 5を隠し、ときにそれらを表示していましたjqueryの魔法のいくつかの種類を持っていますユーザーが下矢印または同様のコントロールをクリックします。これどうやってするの？

ありがとうございました

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行、トリガーには[more]をクリックしてください。さらに、jqueryを使用して3行の残りの部分をロードし、すべてを表示します。

2-すべてを出力しますが、 25pxから100pxのような高さの変更をクリックします。