切换div尺寸的高度问题

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 px，但是height（）表示只有238 px ...

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中设置了边框或边距，并且希望将其包含在height值中，请使用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';
    }
});