0

我需要折叠/扩展 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。

4

1 回答 1

1

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

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

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

于 2013-04-26T21:20:41.813 回答