顯示和隱藏div以縮短動態顯示的文本

Question

我有一個問題，我們必須在產品詳細信息頁面的產品說明中顯示/隱藏某些文本。描述必須縮短到所需的行數，並通過點擊「更多」來顯示完整的描述。我想實現它的如下圖所示的jQuery的鏈接：

http://viralpatel.net/blogs/demo/jquery/jquery.shorten.1.0.js

，代碼如下：

​​

我已插入下面的代碼在base.tpl

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".comment").shorten(); 
}); 
</script> 

我在correspo給了以下班級nding HTML文件：

<div class="comment"> 
    <!-- Link for getting the description from backend --> 
</div > 

由於細節從後端的到來，底層的動態的div並在其內部的無序列表都沒有得到實現，請建議我一些方法來實現這個功能。

Answer 1

我們在我們的門戶網站做的一件事是使用文本溢出CSS屬性。你可以爲你的描述框定義一個高度，然後使用類似於這個的類來給你省略號，表示還有更多要讀的。

.flo 
{ 
    overflow: hidden; 
    white-space: nowrap; 
    -o-text-overflow: ellipsis; 
    -ms-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
} 

然後，您可以添加一個讀更多按鈕，或單擊展開交易的類型，那麼這將擴大在全待觀察的內容。只是在想我的想法，但如果你正確地設計了你的html，你甚至可以使用CSS來擴展描述框的大小：懸停或你的描述可能是複選框的標籤，當你點擊標籤時，它會設置複選框：檢查狀態，讓你的CSS擴大你的描述。

只是通過其他方式來解決您的問題。如果您有任何疑問，請發表評論..

Answer 2

我用這個鏈接來實現這種functionnality的：

http://sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/

這是從

http://spoonfedproject.com/jquery/jquery-slide-with-minimum-height/

我希望這有助於鏈接