[英]jquery setting correct height for content
I've set up a div that stores text with a nice gradient fade at the bottom with a show hide button. 我已经设置了一个div,它使用show hide按钮在底部存储带有漂亮渐变渐变的文本。 I found this tutorial to help me do that, and for the most part i've managed to get it working for my needs. 我发现这个教程可以帮助我做到这一点,并且在很大程度上我已经设法让它满足我的需求。
However, I'm having an issue where when i have a rather long bit of text. 但是,我有一个问题,当我有一个相当长的文本。 When showing the text, it cuts off the bottom of the text. 在显示文本时,它会切断文本的底部。 By doing a console.log($("#id).height());
it appears that it's picking up the div's max-height from the CSS rather than the height of the actual content (but i could be wrong). 通过执行console.log($("#id).height());
它似乎从CSS中获取div的最大高度而不是实际内容的高度(但我可能是错的)。
I've set up a JSFiddle with my example: http://jsfiddle.net/3gnK7/4/ you'll notice that by clicking the Show button on the first part, the last para of the lorem ipsum text is cut off. 我用我的例子设置了一个JSFiddle: http : //jsfiddle.net/3gnK7/4/你会注意到,通过点击第一部分的Show按钮,lorem ipsum文本的最后一段被切断了。
totalHeight += $(this).outerHeight(true);
真正的论点也包括利润。
This does add a requirement of jqueryUI to get the animation however it works completely 这确实增加了jqueryUI的要求来获取动画,但它完全有效
first change your css to 首先将你的CSS更改为
.category_text {
float: left;
position: relative;
overflow: hidden;
margin-bottom: 1em;
max-height: 120px;
}
.cat-height {
max-height: 9999px;
padding-bottom:30px;
}
then change your javascript to use toggleClass like so 然后将你的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;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.