jQuery slideDown with set height and overflow

问题

I have the following HTML code

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

And the CSS

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

Assume .text div has way more text and what I do is hide the amount of text below 100px.

How can I slideDown() the div so I can view the text when I click the button?

Using $(".button").slideDown(); doesn't work because I need to remove the height and then slideDown() but this will not work either.

回答1:

Try this it is very simple and easy without creating any clone.

$(function(){
    $(".button").click(function(){
        var $text = $(".text");
        var contentHeight = $text
                            .addClass('heightAuto').height();
        $text.removeClass('heightAuto').animate({ 
            height: (contentHeight == $text.height() ? 100 : contentHeight)
        }, 500);

    });
});

Added a new class

.heightAuto{
    height:auto;
}

Demo

回答2:

I like Shankar's solution but the functionality breaks down after the first two clicks.. This is because the auto class gets overwritten by the inline height style. So instead I altered the height attribute only.

Here's my go at it:

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

One flaw is that if you add padding to the box you get some ugly jumping. Open to any solutions to fix that.

Here's a demo

Improvements and suggestions are very welcome

回答3:

Clean but expensive option: Use animate directly instead of slideDown(). Determine the height you want to animate to by creating a clone and setting the height to 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;
}

A little uglier but less expensive option: just set the height to auto, hide the element, then use slideDown() to render it:

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

回答4:

I just totally misread your question.

Unfortunately, you can't really set to auto height. But you can animate to a set height, using .animate();

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

slideUp()' and .slideDown(); set the divs to display: none and display: block So you're right, that wouldn't work for what you're trying to do.

EDIT

I just saw Kato's post. That's probably the best option for you.

回答5:

Shankar and Erik's solutions are on the right track. Erik fixed Shankar's problem of only working twice. Now I'm going to fix Erik's problem of having padding:

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

Basically, I took Erik's jsfiddle and changed innerHeight to outerHeight.

Demo

I also had several divs on my page where the height can change, so instead of hard coding which div gets changed, the impacted div is now determined by the ID of the button/image/div the user clicks on.

回答6:

use scrollHeight property, this can make your script dynamic.

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

来源：https://stackoverflow.com/questions/9036015/jquery-slidedown-with-set-height-and-overflow

标签

jquery

html

css

slidedown