javascript - 如何在单击按钮时使div的高度更大，然后再次单击时又变回其原始高度？

我在id="coding"的height:300px上设置了div CSS。
当我单击另一个div id="menu"时，我希望#coding将其高度更改为800px。我设法做到了

<script>
    function changec() {
        document.getElementById('coding').style.height = "800px";
    }
</script>

现在，再次单击#menu时，我希望高度返回到其原始的300px值。有人可以帮忙吗？代码是：

的HTML

<div id="coding">
<div id="menu" onclick="changec()">≡</div>
...
</div>

的CSS

#coding{
    ...
    height:300px;
}

最佳答案

简单检查值是否已设置-删除它（然后CSS高度将接管）。

function changec() {
       var xDiv = document.getElementById('coding');

       if (xDiv.style.height == '')
           xDiv.style.height = '800px'
       else
           xDiv.style.height = ''
}

演示：http://jsfiddle.net/ygalanter/BLE6N/