jQuery 动画高度

Question

我有一个按钮和一个 div，里面有一些文本:

<h2>Click me</h2>
<div class="expand">Lot of text here....</div>

我想默认只显示 2 行文本，因此我将高度设置为 30px 并溢出隐藏。

当我单击 H2 元素时，我希望将文本设置为向下滑动的动画，如果我再次单击，它将向上滑动到默认高度 (30px)。

我用 jQuery 尝试了很多事情，但它不起作用。

编辑:

我还有多个“展开”和多个“H2”，并且文本与 div 不同，因此高度不固定...我想滑动到“自动”高度或 100%。

有人可以帮助我吗？谢谢!

Answer 1

您可以在页面加载时将高度缩小到 30px 之前存储高度，例如:

$(".expand").each(function() {
  $.data(this, "realHeight", $(this).height());
}).css({ overflow: "hidden", height: "30px" });

然后在您的点击处理程序中:

$("h2").toggle(function() {
  var div = $(this).next(".expand")
  div.animate({ height: div.data("realHeight") }, 600);
}, function() {
  $(this).next(".expand").animate({ height: 30 }, 600);
});

所以它的作用是得到 .height() (在 document.ready 中运行)在它设置的 overflow:hidden 之前，并通过 $.data() 存储它，然后在 click 处理程序中(通过 .toggle() 进行交替)，我们每隔一次点击 .animate() 时使用该值(或 30)。到。