设置高度和溢出的 jQuery slideDown

Question

我有以下 HTML 代码

<div class="text">bla bla bla bla</div>
<div class="button">Show</div>

和 CSS

.text{
  height:100px;
  overflow:hidden;
}

假设 .text div 有更多的文本，我所做的是将文本量隐藏在 100 像素以下。

如何slideDown() div 以便在单击按钮时可以查看文本？

使用 $(".button").slideDown(); 不起作用，因为我需要删除高度，然后再使用 slideDown() 但这不会要么工作。

Answer 1

我喜欢 Shankar 的解决方案，但在前两次点击后功能就崩溃了。这是因为自动类被内联高度样式覆盖了。因此，我只更改了高度属性。

这是我的做法:

$(".button").click(function(){
    $box = $(".text");
    minimumHeight = 100;

    // get current height
    currentHeight = $box.height();

    // get height with auto applied
    autoHeight = $box.css('height', 'auto').height();

    // reset height and revert to original if current and auto are equal
    $box.css('height', currentHeight).animate({
        height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
    })
});

一个缺陷是，如果你给盒子添加填充，你会得到一些丑陋的跳跃。对解决该问题的任何解决方案持开放态度。

Here's a demo

非常欢迎改进和建议