javascript - 第二次单击执行的javascript函数

我需要折叠/扩展div的宽度（而不是隐藏/显示），由于某种原因，我编写的这段代码似乎只能从第二次单击开始工作。如果它发出警报来检查变量，则似乎该变量最初并未采用样式。有什么想法吗？这是一个js小提琴：

http://jsfiddle.net/JKxHw/4/

这是我的CSS，HTML和脚本

#left_nav {width:200px; border: 1px solid red; height: 300px;}

<div id="left_nav_collapser">
<a href="#" onclick="javascript:hideNav();return false;">collapse width of left nav</a>
</div>

<div id="left_nav">
<div id="left_nav_navlinks">
<ul><li>Apples<ul><li>Macintosh</li><li>Styrofoam</li></ul>
</li><li>Oranges</li><li>Bananas</li></ul>
</div>
   </div>
<script>
function hideNav(){

var myLayer = document.getElementById('left_nav').style.width;
//alert(myLayer);
if(myLayer=="200px"){
    document.getElementById('left_nav').style.width="0px";
    document.getElementById('left_nav_navlinks').style.display="none";
    } else {
    document.getElementById('left_nav').style.width="200px";
    document.getElementById('left_nav_navlinks').style.display="block";
};

}
</script>

更多信息：尽我所能，我不能为此使用jQuery。

最佳答案

.style仅从样式属性获取信息，而不从计算的样式获取信息。您可以改用window.getComputedStyle，但对我来说似乎不灵活。相反，您应该只拥有一个变量，该变量可以跟踪元素所在的可见性状态。

您甚至可以在元素本身上使用.dataset（假设您不需要支持IE），尽管任何变量都可以。

http://jsfiddle.net/JKxHw/6/