javascript - 在使用 jQuery 扩展 DIV 时将高度设置为自动

Question

我试图在展开时将 DIV 的高度设置为自动，但是当我只执行“”时它会缩小它，或者当我执行“自动”时它什么也不做。我如何才能将高度更改为自动？我的内容将是所有不同的高度，并且不想每次设置其中一个时都必须传入高度参数。这就是我所拥有的，但无法正常工作。 DIV 将从静态高度开始，然后需要扩展以显示 DIV 中的所有文本。

我的 jsFiddle: http://jsfiddle.net/gNsrG/

这是我的 jQuery 代码:

function changeheight(_this) {
    var thisText = $(_this).text() ;
    if (thisText == 'more') {
        $('#overviewtext').animate({
            'height': ''
        }, 600);
        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }
    else if (thisText  == 'less') {

        $('#overviewtext').animate({
            'height': '150px'
        }, 600);

        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }

    return false;
};

Answer 1

您永远不必更改高度。你应该只使用 JQuery 的 slidedown 和 slideup

我在 jsfiddle 上对您的示例进行了一些更改|

编辑

我误解了问题的意思。您想要显示一些文本，然后单击越来越多的文本显示。然后点击越来越少的文字显示。我已经完成了这个，但它有点老套。显然，JQuery 不能很好地处理自动和百分比动画。基本上我所做的就是当你点击更多时。我存储了当前的高度。暂时将其更改为自动，使其完全打开。有那个高度。将其改回关闭(希望用户没有看到)。然后采用该高度并将其用于动画。我希望有更简单的方法，但现在我找不到。

我的例子在这里jsfiddle

我能想到的实现此目的的唯一其他方法是拥有一个内部 div，其中包含您向下滑动和向上滑动的所有“更多”文本，但您必须能够区分更多的截止位置文本。