可折叠内容不适合内容的高度

Question

我在下面有这个脚本，点击“阅读更多”按钮后，它应该扩展到完整内容的高度。它几乎可以工作，但是高度仍然存在一个小问题，它不会扩展到内容的整个高度并将其中途切断。我认为剧本里面有一个错误。

  (function ( $ ) {
    $.fn.readMoreFade = function(options) {
        var settings = $.extend({
            backgroundColor: "white",
            buttonClass: "button"
        }, options );

        this.css( "height", 100 );
        this.css( "overflow", "hidden" );
        this.css( "position", "relative" );
        this.append('<p class="readMoreFade"><a href="#" class="' + settings.buttonClass + '">Read More</a></p>')

        var readMoreButton = this.find('.readMoreFade');
        var backgroundString = settings.backgroundColor ? settings.backgroundColor : this.css('background-color');

        readMoreButton.css('background-image', '-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,0,0,0)),color-stop(1, '+backgroundString+'))');
        readMoreButton.click(function(){
                totalHeight = 0

                $el = $(this);
                $p  = $el;
                $up = $p.parent();
                $ps = $up.find("p:not('.readMoreFade')");

                $ps.each(function() {
                    totalHeight += $(this).outerHeight();
                });

                $up
                    .css({
                        "max-height": 9999
                    })
                    .animate({
                        "height": totalHeight
                    });
                $p.fadeOut();
                return false;
        })

        return this;
    };
}( jQuery ));

$('#fadeMe').readMoreFade({buttonClass: "btn btn-primary"});

#fadeMe{
    padding: 1em;
    background-color: lightgrey;
    width: 420px;
    margin:30px auto;
    font-family:'Roboto';
}
.readMoreFade {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,0,0,0)), color-stop(1, rgba(255,0,0,100)));
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 30px 0 30px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="fadeMe">
    <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac arcu id magna sollicitudin fermentum. Quisque tristique eros ex, vitae bibendum metus scelerisque a. Donec posuere leo vestibulum dui vestibulum, non faucibus metus vestibulum. Suspendisse commodo at orci ac lobortis. Mauris vestibulum, orci eu feugiat imperdiet, erat urna lobortis ante, vitae porttitor erat eros finibus massa. Aenean congue urna posuere nisl lobortis sollicitudin. In sed iaculis velit, eu tempor lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque laoreet finibus dapibus. Duis eget metus sem. Cras non tempor dui, in euismod leo.</p>
    <p>Sed justo felis, venenatis vel est sit amet, varius varius libero. Nam a ligula et tellus posuere malesuada a ultricies felis. Curabitur vitae magna lectus. Nam consequat vitae neque et varius. Nunc mollis lacus non varius rutrum. Nulla et ex vitae lectus rhoncus ultricies. Proin fringilla id risus ut finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vitae molestie diam.</p>
    <p>Sed justo felis, venenatis vel est sit amet, varius varius libero. Nam a ligula et tellus posuere malesuada a ultricies felis. Curabitur vitae magna lectus. Nam consequat vitae neque et varius. Nunc mollis lacus non varius rutrum. Nulla et ex vitae lectus rhoncus ultricies. Proin fringilla id risus ut finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vitae molestie diam.</p>
</div>

Answer 1

如果我已正确阅读您的javascript，您将获得所有p标记的高度并设置＆＃39; fadeMe＆＃39; div到那个高度。你的fadeMe＆＃39; div的填充值为1em，因此请务必在您的＆＃39; totalHeight＆＃39;中添加至少2em。变量

如果有效，请告诉我。）

在$ ps循环下添加以下行 -

var divPadding = Number($up.css("padding").replace("px", "")) * 2;
totalHeight = totalHeight + divPadding;