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

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标签的高度，并将'Fademe'Div设置为该高度。您的" Fademe" Div的填充为1EM，因此请确保至少将2em添加到" TotalHeight"变量中。

请告诉我是否有效：）

在您下添加以下几行$ PS循环 -

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