0

我已经设置了一个 div，它在底部存储带有漂亮渐变淡入淡出的文本，并带有一个显示隐藏按钮。我发现本教程可以帮助我做到这一点，并且在大多数情况下，我已经设法让它满足我的需要。

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

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

4

2 回答 2

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

真正的论点也将包括边距。

于 2013-06-20T10:23:34.927 回答
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;
    });
});

演示

于 2013-06-20T10:25:55.997 回答