執行第二次點擊的JavaScript函數

Question

我需要摺疊/展開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這一點。

Answer 1

.style只從樣式屬性而不是計算樣式獲取信息。您可以改用window.getComputedStyle，但對我來說似乎不靈活。相反，你應該只是有一個變量，以跟蹤該元素的可見性狀態。

你甚至可以使用.dataset（假設你不需要支持IE）對元素本身，雖然任何變量會做。

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