Question

我有一个按钮，里面有一些文字：

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

我想默认显示两行文字，所以我将高度设置为30px并溢出隐藏。

当我点击H2元素时，我希望将文本设置为slideDown动画，如果我再点击一次，它将会滑动到默认高度（30px）。

我正在尝试使用jQuery做很多事情，但它不起作用。

编辑：

我也有不止一个“展开”和多个“H2”和文字不同的div，所以高度不固定...我想滑到“自动”高度或100％。

有人能帮助我吗？谢谢！

Answer 1

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

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

然后在你的click处理程序中：

$("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，然后通过{{3}存储它然后在click处理程序中（通过$.data()替换），我们使用该值（或30）每隔一次点击.toggle()来。

Answer 2

DOM元素的scrollHeight属性也可以为您提供所需的高度。

$(".expand").animate({
    height : $(".expand")[0].scrollHeight
},2000);

可以在http://jsfiddle.net/af3xy/4/

找到工作示例

Answer 3

这个帖子不是最新的，但这是另一种方法。

我今天一直在处理同样的问题，无法让它正常工作。即使使用height: auto计算的正确高度，动画也不会给我正确的结果。我尝试将其放在$(window).load而不是$(document).ready，这有点帮助，但仍然切断了我的最后一行文字。

我没有动画高度本身，而是通过动态地向我的div添加和删除隐藏类来解决问题。如果您使用jQuery-UI，则可以对这些效果应用持续时间。这似乎也适用于所有浏览器。

Here's a working exampe.

jQuery动画高度

3 个答案: