javascript - 动画后响应式自动高度容器

Question

我通过 javascript 更改元素的高度(无法通过 css 将其从 0 更改为自动)。

/* Function to animate height: auto */
function autoHeightAnimate(element, time){
    var curHeight = element.height(), // Get Default Height
        autoHeight = element.css('height', 'auto').height(); // Get Auto Height
          element.height(curHeight); // Reset to Default Height
          element.stop().animate({ height: autoHeight }, time); // Animate to Auto Height
}

在我调整 Chrome 窗口的大小后，该元素不会自动更改其高度，因为它只会在我单击其中一个标签后发生变化。 DEMO在这里。

是否可以通过 css 以某种方式做到这一点？如果不是，如何在我缩放浏览器窗口后通过 javascript/jQuery 进行更改？

Answer 1

在这种情况下，您可以使用 from resize 函数并在调整大小时设置高度，如下所示:

$( window ).resize(function() {
      autoHeightAnimate('','');
});