jQuery使用设置的高度和溢出向下滑动

我有以下HTML代码

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

假设

.text

div

有更多的文本，我要做的是将文本量隐藏在100px以下

如何才能

slideDown（）

div，以便在单击按钮时查看文本

---

使用

$（“.button”）.slideDown（）

不起作用，因为我需要删除高度，然后滑下（），但这也不起作用。

我完全误解了你的问题

不幸的是，您不能真正设置为“自动高度”。但是可以使用.animate（）将动画设置为设定的高度

.animate（{height:'200px'}；

slideUp（）”

和

.slideDown（）；

将div设置为

display:none

和

display:block

，因此您是对的，这对您尝试执行的操作无效

编辑

---

我刚看到加藤的帖子。这可能是你最好的选择。

干净但昂贵的选项：直接使用动画，而不是滑动向下（）。通过创建克隆并将高度设置为“自动”，来确定要设置动画的高度

$('.button').click(function() {
   var $div = $('div.text');
   $div.animate({height: determineActualHeight($div)});
});

// if you can determine the div's height without this, it would be faster
// what makes this expensive is inserting and removing an element from the dom
// of course, you aren't doing this a thousand times a second, so it's probably no biggie
function determineActualHeight($div) {
   var $clone = $div.clone().hide().css('height', 'auto').appendTo($div.parent()),
       height = $clone.height();
   $clone.remove();
   return height;
}

更难看但更便宜的选项：只需将高度设置为“自动”，隐藏元素，然后使用slideDown（）进行渲染：

$('.button').click(function() {
   $('div.text').hide().css('height', 'auto').slideDown();
}

---

试试这个，它非常简单，无需创建任何克隆

$(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;
}

---

我喜欢Shankar的解决方案，但在前两次单击后功能就崩溃了。这是因为auto类被内联高度样式覆盖。因此，我只更改了高度属性

我的想法是：

$(".button").click(function(){
    $box = $(".text");
    minimumHeight = 100;

    // get current height
    currentHeight = $box.height();

    // get height with auto applied
    autoHeight = $box.css('height', 'auto').height();

    // reset height and revert to original if current and auto are equal
    $box.css('height', currentHeight).animate({
        height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
    })
});

一个缺陷是，如果你在盒子里添加填充物，你会得到一些丑陋的跳跃。打开任何解决方案来解决这个问题

---

非常欢迎改进和建议

使用scrollHeight属性，这可以使脚本动态

$('.button').click(function() {
    $('.text').animate({ 'height': $('.text')[0].scrollHeight }, 1000);
});

---

Shankar和Erik的解决方案是正确的。Erik修复了Shankar只工作两次的问题。现在我将修复Erik的填充问题：

$(function(){
    $(".arrow-details").click(function(e){
        var id = "#other-" + e.target.id;
        var $box = $(id);
        minimumHeight = 350;
        currentHeight = $box.outerHeight();
        autoHeight = $box.css('height', 'auto').outerHeight();
        $box.css('height', currentHeight).animate({
            height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
        })
    });
})

基本上，我拿了Erik的JShiddle，将innerHeight改为outerHeight

---

我的页面上也有几个

div

s，高度可以改变，因此不必硬编码哪个div会改变，受影响的

div

现在由用户单击的按钮/图像/div的ID决定。

比我强哈哈，我对第二个选项做了修改：O（不过你的有点干净）：）这确实是一个难题，不是吗？彻底回答还是快速回答？因此，我总是尝试对所有有用的答案进行投票，而不仅仅是第一个答案，尤其是如果每个答案都包含一些独特的有用细节的话如果你做了这项工作，你应该发布你的答案；我相信这会对某人有所帮助。我不想隐瞒。。。只需将其向下滑动或设置动画，然后您就可以使用第一种方法，或+ShankarSangoli的方法。仅供参考-第二个选项并没有隐藏它，只是简单地让它从零开始扩展，而不是从当前高度。你走对了，你的第一个答案也不错。你只需要css中的height:auto就可以让事情顺利进行：）啊，我没有意识到

height:auto

是用

.slideDown（）工作的-是否默认为
显示：无
？另外，我不知道你可以做
.animate（）
to
height:auto
Ha，我当然不是jQuery高手，所以我还有很多路要走；我认为当你设置
height:auto
时会出现的“光点”会更加明显。这是因为CSS在函数返回之前不会被渲染（即准线程化）？它发生在微秒的几分之一之内。我认为它甚至不会发生。我以前注意到，在进行css更改时，必须设置timeout（），然后立即尝试使用它们。我怀疑CSS更改在js方法退出之前不会被应用。CSS在JavaScript完成之前不会被渲染。在需要大小或呈现页面之前，不会计算元素的大小。首次添加高度：自动时，浏览器不会渲染高度或计算新尺寸。然后在调用
height（）
时计算大小。由于
height:auto
在函数结束前被删除，因此浏览器永远不会有机会以这种方式渲染它。
$(function(){
    $(".arrow-details").click(function(e){
        var id = "#other-" + e.target.id;
        var $box = $(id);
        minimumHeight = 350;
        currentHeight = $box.outerHeight();
        autoHeight = $box.css('height', 'auto').outerHeight();
        $box.css('height', currentHeight).animate({
            height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
        })
    });
})