1

我做了一个例子：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 的最顶部。

但是我应该设置什么高度才能让它回来并显示全部内容？

我能想到的一种方法是在缩小之前保存它。还有其他选择吗？（如果在保存高度后内容发生变化，这种方式就不会发生，它可能会）

4

4 回答 4

2

使用auto值height

$('#container').height( 'auto' );
于 2012-12-22T11:52:17.347 回答
2

我找到了一种可以获得相同效果的方法，即使用 jQuerysslideUp()而slideDown() 不是“手动”进行。

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

于 2012-12-22T11:56:22.730 回答
1

您可以将初始高度存储在 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/

于 2012-12-23T05:58:10.617 回答
-1 
height:initial
overflow: visible

upd：在您的示例中添加“显示”按钮，http://jsfiddle.net/YfV7G/6/

于 2012-12-22T11:51:31.440 回答