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的解决方案但是在前两次点击后功能失效..这是因为自动类被内联高度样式覆盖。所以我只改变了高度属性。

这是我的理由：

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

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

<强> Here's a demo

非常欢迎改进和建议

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

<强> Demo

Answer 3

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

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

我完全误读了你的问题。

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

设置动画到设定的高度

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

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

编辑

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

Answer 5

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更改为externalHeight。

Demo

我的页面上还有几个div，高度可以更改，因此，现在div由按钮/图像的ID确定，而不是硬编码更改div， / div用户单击。

Answer 6

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

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

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

6 个答案: