使用javascript切換div的高度

Question

我想切換div高度，但是當我這樣做時，只會點擊一次，一次就關閉。無論如何，無論點擊多少次，它都可以切換。謝謝！這裏是我的代碼：

$(document).ready(function() { 
    $('#block1').click(function() { 
     toggle = document.getElementById('block1').style.height; 
     if (toggle <= 30) { 
      $("#block1").css('height', '200px'); 
     } else $("#block1").css('height', '30px'); 
    }); 
}); 

Answer 1

當你正在使用jQuery我會建議你使用height()方法將返回整數值可以比較，而不是字符串值。

$(document).ready(function() { 
    $('#block1').click(function() { 
     var toggle = $(this).height(); 
     if (toggle <= 30) { 
      $(this).css('height', '200px'); 
     } else $(this).css('height', '30px'); 
    }); 
}); 

或者你可以使用parseInt功能：

var toggle = parseInt(document.getElementById('block1').style.height, 10) ; 

見的jsfiddle demo

Answer 2

document.getElementById('block1').style.height回報30px。

'30px' <= 30返回false，所以高度一直設置爲30px。

你可以使用.height()，它返回一個數字，但我會建議使用類和切換：

http://jsfiddle.net/TQs6h/

$(document).ready(function() { 
    $('#block1').click(function() { 
     $(this).toggleClass('tall'); 
    }); 
});