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

Posted 2023-05-08

【中文标题】使用jQuery扩展DIV时将高度设置为自动

【英文标题】：Set height as auto on expanding DIV with jQuery

【发布时间】：2012-02-28 07:42:56

【问题描述】：

当我展开它时，我试图将 DIV 的高度设置为 auto，但是当我只做 '' 时它会缩小它，或者当我做 'auto' 时它什么也不做。如何让它将高度更改为自动？我的内容将是所有不同的高度，并且不想每次设置其中一个时都必须传递高度参数。这就是我所拥有的无法正常工作的内容。 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;
;

【问题讨论】：

可能重复：***.com/questions/5003220/…

通常这些类型的“更多”功能需要交换（切换）2 个 div，一个具有较小的文本，另一个具有整个文本。只是一个想法......

@Nathan 好的，你提到的重复问题没有答案

@LaurenceBurke 实际上第一个答案看起来可行......

@Nathan 那么也许您应该进行测试，如果它确实有效，那么请参考答案而不是问题。非常反提升重复标志。

【参考方案1】：

您永远不必更改高度。您应该只使用 JQuery 的向下滑动和向上滑动

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

编辑

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

我的例子在这里jsfiddle

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

【参考方案2】：

改进的代码：

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

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

【讨论】：

它并不能完全满足我的需要。我需要将其设置在静态高度才能开始，然后展开以显示所有文本。这会适得其反，并将其减少到零。

【参考方案3】：

您可以使用 .css() 更改元素的 css，在这种情况下，它看起来像

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

您可以尝试在 animate 调用之后添加该行。

【讨论】：

这不会为它设置动画，它只会达到那个高度。在我看来，OP 希望它是动画的。

【参考方案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;