單擊按鈕將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/