jQuery slideDown设置高度和溢出

问题描述

我有以下HTML代码

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

和CSS

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

假设 .text div 有更多的文本，我做的是隐藏文字的数量低于100px。

Assume .text div has way more text and what I do is hide the amount of text below 100px.

我如何 slideDown（） div 这样我可以在点击按钮时查看文本吗？

How can I slideDown() the div so I can view the text when I click the button?

使用 $（。button）。slideDown（）; 不工作，因为我需要删除高度，然后<$ c $

Using $(".button").slideDown(); doesn't work because I need to remove the height and then slideDown() but this will not work either.

推荐答案

尝试这个非常简单而且不需要创建任何克隆。

Try this it is very simple and easy without creating any clone.

$(function(){
    $(".button").click(function(){
        var $text = $(".text");
        var contentHeight = $text
                            .addClass('heightAuto').height();
        $text.removeClass('heightAuto').animate({ 
            height: (contentHeight == $text.height() ? 100 : contentHeight)
        }, 500);

    });
});

添加了一个新类别

.heightAuto{
    height:auto;
}

Demo

这篇关于jQuery slideDown设置高度和溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！