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的slidingown和slideup

我在jsfiddle

上对你做了一些修改

修改

我误解了问题是什么。您希望显示一些文本，然后单击越来越多的文本显示。然后单击越来越少的文本显示。我已经完成了这个，但它有点hacky。显然，JQuery在动画自动和百分比方面表现不佳。基本上我所做的就是当你点击更多时。我存储了当前的高度。暂时将其更改为auto，使其完全打开。得到那个高度。将其更改回关闭（希望用户看不到这一点）。然后拿起那个高度并用它来制作动画片。我希望有一种更简单的方法，但现在我找不到它。

我的例子是jsfiddle

我能想到实现这一目标的唯一另一种方法是让内部div包含所有“更多”文本，你可以滑动并滑动，但是你必须能够区分截止的位置。文本。

Answer 2

改进代码：

function changeheight(_this) {
    $('#overviewtext').slideToggle(600); 
    $(_this).text($(_this).text() == 'more' ? 'less' : 'more');
    return false;
};

在这里演示http://jsfiddle.net/gNsrG/3/

Answer 3

你可以使用.css（）更改元素的css，在这种情况下它看起来像

$('#overviewtext').css('height', 'auto');

您可以尝试在动画调用后添加该行。

Answer 4

我遇到了类似的问题，我的解决方案是使用JqueryUI，在单击实际文本时为类切换设置动画

jQuery ("#box_description_texts p").click(function() { 
    jQuery(this).toggleClass("box_text_expanded", 250);
});

并在CSS中

#box_description_texts p.box_text_expanded {height: auto;}

使用jQuery在扩展DIV时将高度设置为auto

4 个答案:

修改