将div高度设置为手动更改之前的高度

Question

我举了一个例子：http://jsfiddle.net/YfV7G/4/

这是一个像这样的div

<div id="container">
    <h2>The header</h2>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
</div>

我改变了高度：

$('#container').animate({
    height: '5px'
}, 1000, null);​

Css是overflow:hidden

我将高度更改为仅显示div的最顶部。

但我该如何设置高度以将其恢复并显示完整内容？

我能想到的一个方法是在缩小之前保存它。还有其他选择吗？ （如果在保存高度之后有内容更改，那就不会这样了）

Answer 1

对auto

使用值height

$('#container').height( 'auto' );

Answer 2

通过使用jQuerys slideUp()和slideDown()，我找到了一种可以获得相同效果的方法 而不是“手动”。

然后它会是这样的： http://jsfiddle.net/YfV7G/9/

Answer 3

您可以将初始高度存储在rel属性中，稍后再检索它。像这样：

var container = $("#container");

container.attr('rel', container.height()).animate({
    height: '40px'
}, 1000, null);

container.hover(
  function() {
    $(this).height(container.attr('rel'));
  },
  function() {
    $(this).animate({
      height: '40px'
    }, 1000, null);
  }
);

实施例： http://jsfiddle.net/kvZ26/

修改
这是更新的答案，应该与动态生成的内容一起使用。根据您的样式，您可能需要在检索值时使用.outerHeight()。

var container = $("#container");

container.attr('rel', container.height()).animate({
    height: '40px'
}, 1000, null);

container.hover(
  function() {
    var height = $("#container > h2").height() + ($("#container > a").height() * $("#container > a").length);
    $(this).height(height);
  },
  function() {
    $(this).animate({
      height: '40px'
    }, 1000, null);
  }
);

（您可能需要调整它，这样您就不需要复制容器ID了。）

实施例： http://jsfiddle.net/xDCsY/1/

Answer 4

height:initial
overflow: visible

upd：为您的示例http://jsfiddle.net/YfV7G/6/

添加“显示”按钮