使用jQuery展开DIV时，将高度设置为auto

Set height as auto on expanding DIV with jQuery

本文关键字：高度 设置 auto jQuery 展开 DIV 使用      更新时间：2023-09-26

当我展开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;
};

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

我在jsfiddle 上给你做了一些修改

编辑

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

我的例子是jsfiddle

我能想到的实现这一点的唯一其他方法是拥有一个内部div；更多"；您向下滑动和向上滑动的文本，但您必须能够区分更多文本的截止位置。

改进的代码：

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

此处演示http://jsfiddle.net/gNsrG/3/

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

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

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

我也遇到了类似的问题，我的解决方案是使用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;}
相关文章：