Question

我正在使用以下代码切换div的大小：

var position = 'expanded';
var curHeight = $('.login-div').height();
$(".login-header").click(function() {
    if (position == 'expanded') {
        $('.login-div').animate({
            height: '3.2vw'
        });
        position = 'collapsed';
    } else {
        $('.login-div').animate({
            height: curHeight
        });
        position = 'expanded';
    }
});

我的初始div高度没有默认大小。它的高度取决于内容。所以我试图获得div的高度并在我第二次点击时使用它，将它的大小改回正常。但不知何故它没有采取正确的高度。我的初始div高度为260像素，但高度（）表示它只有238像素......

Answer 1

我创造了一个小例子。不确定你的问题究竟是什么意思。这说明了你想做什么吗？

 var positionExpanded,
     curHeight = $('.login-div').outerHeight();

$(".login-header").click(function() {
    if (positionExpanded) {
        $('.login-div').animate({
            height: '32vw'
        });
        positionExpanded = false;
    } else {
        $('.login-div').animate({
            height: curHeight
        });
        positionExpanded = true;
    }
});

此处的演示演示：http://jsbin.com/jivezilula/4/edit?html,css,js,output

Answer 2

如果您的元素在CSS中设置了边框或边距，并且您希望将其包含在高度值中，请使用outerHeight()

var curHeight = $('.login-div').outerHeight();

Answer 3

var position = 'expanded';
var curHeight = $('.login-div').height();
$(".login-header").click(function() {
    if (position == 'expanded') {
        $('.login-div').animate({
            height: '3.2vw'
        });
        position = 'collapsed';
    } else {
        $('.login-div').animate({
            height: curHeight
        });
        position = 'expanded';
    }
});

切换div大小问题的高度

3 个答案: