单击按钮时将 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;
}