具有设置高度和溢出的jQuery slideDown

Question

我有以下HTML代码

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

和CSS

.text{
  height:100px;
  overflow:hidden;
}

假设.text div有更多文本，我所做的是隐藏100px以下的文本量。

我如何slideDown() div以便我可以在单击按钮时查看文本？

使用$(".button").slideDown(); 不起作用，因为我需要删除高度，然后slideDown()但这也不起作用。

Answer 1

我喜欢Shankar的解决方案但是在前两次点击之后功能崩溃了。这是因为自动类被内联高度样式覆盖。 所以我只更改了height属性。

这是我的理由：

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

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

这是一个演示

非常欢迎改进和建议

Answer 2

试试这个非常简单容易，不需要创建任何克隆。

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

演示

Answer 3

干净但昂贵的选项：直接使用animate而不是slideDown（）。 通过创建克隆并将高度设置为auto来确定要设置动画的高度。

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

一个更丑陋但更便宜的选项：只需将高度设置为auto，隐藏元素，然后使用slideDown（）来渲染它：

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

Answer 4

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的jsfiddle并将innerHeight改为outerHeight。

演示

我的页面上还有几个div可以改变高度，所以不是硬编码哪个div被改变，受影响的div现在由用户点击的按钮/图像/ div的ID决定。

Answer 5

我完全误解了你的问题。

不幸的是，你无法真正设置为自动高度。 但是你可以使用.animate（）;设置动画到设定的高度。

.animate({height:'200px'};

slideUp()'和.slideDown(); 将div设置为display: none和display: block所以你是对的，这对你想做的事情不起作用。

编辑

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

Answer 6

使用scrollHeight属性 ，这可以使您的脚本动态化。

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