jquery设置正确的内容高度

时间:2013-06-20 10:11:49

标签: javascript jquery css css3

我已经设置了一个div,它使用show hide按钮在底部存储带有漂亮渐变渐变的文本。我发现这个tutorial可以帮助我做到这一点,并且在很大程度上我已经设法让它满足我的需求。

然而,我有一个问题,当我有一个相当长的文本。在显示文本时,它会切断文本的底部。通过执行console.log($("#id).height());,它似乎从CSS中获取div的最大高度而不是实际内容的高度(但我可能是错的)。

我已经使用我的示例设置了一个JSFiddle:http://jsfiddle.net/3gnK7/4/您会注意到,通过单击第一部分上的显示按钮,lorem ipsum文本的最后一段是切断了。

2 个答案:

答案 0 :(得分:1)

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

真正的论点也包括边距。

答案 1 :(得分:1)

这确实增加了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