切換高度

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高度沒有默認size.Its高度取決於content.So我是試圖讓div的高度，並在我的第二次點擊使用它，將其大小恢復正常。但不知何故它不採取正確的高度。我的初始div有260像素的高度，但高度（）表示它只有238像素...

Answer 1

如果你的元素在CSS就可以設置一個邊界或保證金，並要包含那些在高值，使用outerHeight()

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

Answer 2

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

Answer 3

我已經創建了一個小例子。不確定你的問題到底是什麼意思。這是否說明你想要做什麼？

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