切換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';
    }
});