切换高度

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