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

Question

I have this script down below, it should expand to the height of the full content after clicking the button "Read more". It workes almost, but there is still a small problem with the height, it doesn't expand to full height of the content and cuts it halfway. I presume that there is a mistake inside the script.

  (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

If I've read your javascript correctly, you are getting the height of all of the p tags and setting the 'fadeMe' div to that height. Your 'fadeMe' div has a padding of 1em, so make sure you add at least 2em to your 'totalHeight' variable.

Please let me know if this works :)

Add the following lines under you $ps loop -

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