0

表示非表示ボタンを使用して、下部に素敵なグラデーション フェードを含むテキストを格納する div を設定しました。これを行うのに役立つ チュートリアルを見つけました。ほとんどの場合、自分のニーズに合わせて機能させることができました。

ただし、テキストがかなり長い場合に問題が発生します。テキストを表示すると、テキストの下部が切り取られます。a を実行する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 に答える