单击按钮将div高度从设置的高度扩展到自然高度

Question

我有一个div，在该div中，我有多种元素（p，strong，a等）-默认情况下，此父div的高度为200px。 当我单击“更多”按钮（父div的最后一个子元素）时，我希望div扩展到其自然高度。 我正在使用CSS max-height和overflow：hidden来实现小于自然div的效果并隐藏溢出元素。 我需要使用javascript和jquery完成此操作-除非有人可以向我解释如何在我的wordpress网站中正确引用它们，否则无需任何外部库。

我使用的是本教程的解决方案 ，它的运行效果非常好，除了因为我的父div内有多个P标签，它不会扩展到所述父div的整个高度-因此，我的问题是。

编辑：经过一段时间后，这是一个非常好的解决方案，其中还包括动画。 小提琴 。

$('.career-readMore').on('click', function(event) {
var container = $(this).parent();
$(container).toggleClass('expanded');
$(container).css('max-height', '3000px');

Answer 1

https://jsfiddle.net/smo5vz67/

假定小提琴中显示的结构，解决方案很简单：

$( document ).ready(function() {
    $('.read-more').click(function(){
        $(this).parent().toggleClass('expanded');
    });
});

加上一些CSS

.container{
    overflow: hidden;
    max-height:200px;
    position: relative;
    border:1px solid #999;
}

.container.expanded{
    max-height:none;
}

.read-more{
    position: absolute;
    right:0;
    bottom:0;
}

Answer 2

尝试这样的事情

$('#btnExpand').click(function(){
    $('#target').css('height', 'inherit');
});

https://jsfiddle.net/aznpqud0/