第二次單擊執行的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/