Question

我正在尝试制作一个可以通过点击按钮扩展自动高度的框。默认情况下，该框的高度为30px，当我单击按钮时，框的扩展高度取决于内容的数量。也是要切换的按钮。

任何人都可以帮我解决Jquery的问题吗？

这是我的代码。

<div class="box">
  text <br>text <br>text <br>text <br>text <br>text <br>  text <br>text <br>text <br>text <br>text <br>text <br>
</div>
<a href="#" class="btnMore">button</a>

.box { height:30px; overflow:hidden; }

Answer 1

不知道是否有更好的方法，请尝试

$('.btnMore').click(function () {
    var x = $(this).prev().stop(true);
    x.animate({
        height: x.prop('scrollHeight')
    })
})

演示：Fiddle

Answer 2

$(document).ready(function(){    
    var trg = $("#box"), // The target container
        preHeight = 200; // The initial height

    trg.css('height', preHeight); // Set the initial height on page load

    $('.link').on('click', function(){
        var curHeight = trg.height();

        if(preHeight == curHeight){
            var xHeight = 'auto';
            $(this).text('Shrink');
        } else {
            var xHeight = preHeight;
            $(this).text('Stretch');
        }

        var trgHeight = trg.css('height', xHeight).height();
        trg.height(curHeight).animate({ height: trgHeight }, 600, function() { trg.css('height', xHeight); });
    });
});

小提琴：http://jsfiddle.net/effone/w82Ve/

Answer 3

使用此jquery代码

$('.btnMore').click(function(){
var $this = $(this);
if($this.data('expanded') == "yes"){
    $this.data('expanded',"no");
    $('.box').animate({height:'30px'});
}else{
    $this.data('expanded',"yes");
    $('.box').css({height:'auto'});
}
});

检查这个小提琴。

http://jsfiddle.net/midoalone/37Tg5/

Answer 4

你可以这样做：

$('.btnMore').click(function () {
    var el = $('.box'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
    el.height(curHeight).animate({
        height: autoHeight == curHeight ? "30px" : autoHeight
    }, 1000);
});

<强> Fiddle Demo

Answer 5

要将高度从30px更改为自动，请使用此代码

$('#test').click(function() {   
    autoHeight = $('.box').css('height', 'auto').height();
    $('.box').animate({height:autoHeight}, 500);
}

如果您想使用此代码，下面的代码会将div的高度在30px和auto之间切换

$('#test').clickToggle(function() {   
    autoHeight = $('.box').css('height', 'auto').height();
    $('.box').animate({height:autoHeight}, 500);
},
function() {
    autoHeight = $('.box').css('height', '30px').height();
    $('.box').animate({height:autoHeight}, 500);
});

jquery自动高度动画切换按钮

5 个答案: