Question

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

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

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

Answer 1

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

真正的论点也包括边距。

Answer 2

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

jquery设置正确的内容高度

2 个答案: