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设置内容的正确高度

回答

相关问题