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

【问题标题】：Expand a div height from set height to natural height on button click单击按钮时将 div 高度从设置高度扩展到自然高度
【发布时间】：2015-11-15 01:37:04
【问题描述】：

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

我使用的是this tutorials solution，它的效果非常好，除了因为我在父 div 中有多个 P 标签，它不会扩展到所述父 div 的全高 - 因此我的问题。

编辑：经过一段时间的工作，这是一个非常好的解决方案，其中还包括动画。 Fiddle.

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

【问题讨论】：

向我们展示您的代码，如果可能的话，或在线示例
同意！给我们看一些代码
这里是代码。由于某种原因，它在代码笔中向上“扩展”。 link

标签： javascript jquery html css wordpress

【解决方案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;
}

【讨论】：

这很好用。如何为高度变化设置动画？

【解决方案2】：

试试这样的

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

https://jsfiddle.net/aznpqud0/

【讨论】：

这也很好用 - 是否可以为高度变化设置动画？
你可以使用 jquery animate 但你必须设置一个静态高度而不是使用继承