jquery設置內容的正確高度

我已經設置了一個存儲具有良好漸變漸變的文本的div，在底部使用show hide按鈕。我發現tutorial可以幫助我做到這一點，而且大部分時間我都能夠滿足我的需求。jquery設置內容的正確高度

但是，我有一個問題，當我有一個相當長的文本。顯示文字時，會切斷文字的底部。通過做一個console.log($("#id).height());它似乎從CSS拾取div的最大高度而不是實際內容的高度（但我可能是錯的）。

我已經設置了的jsfiddle我的例子：http://jsfiddle.net/3gnK7/4/你會發現，通過點擊顯示在第一部分按鈕時，Lorem存有文本的最後段被切斷。

2013-06-20 Jarede

這確實增加jQueryUI的的要求，以獲得動畫但是它的工作原理完全

第一你的CSS改變

.category_text { 
    float: left; 
    position: relative; 
    overflow: hidden; 
    margin-bottom: 1em; 
    max-height: 120px; 

} 

.cat-height { 
    max-height: 9999px; 
    padding-bottom:30px; 
}

然後改變你的JavaScript使用toggleClass像這樣

$(document).ready(function() { 
    $(".showbutton").live("click", function (e) { 
     e.preventDefault(); 

     var buttonid = $(this).attr("id"); 
     buttonid = buttonid.substring(11, buttonid.length); 

     $("#text_"+buttonid).toggleClass('cat-height','slow'); 

     if($("#showbutton_" + buttonid).text() == 'Show') { 
      $("#showbutton_" + buttonid).text("Hide"); 
     } 
     else { 
      $("#showbutton_" + buttonid).text("Show"); 
     } 
     return false; 
    }); 
});

DEMO

來源

2013-06-20 10:25:55 AbstractChaos

這很好用，t無論出於何種原因，jQueryUI添加到我們網站的頁腳（或者至少在添加此腳本的位置之下）......是否有使用jQuerys延遲或其他方法獲得相同效果的方法？ – Jarede

@Jarede在旁邊註釋如果你不想使用JQueryUI，你可以利用CSS3轉換並依賴標準的JQuery toggleClass – AbstractChaos

totalHeight += $(this).outerHeight(true);

真實的參數也包括邊距。

來源

2013-06-20 10:23:34 sinisake

jquery設置內容的正確高度

回答

相關問題