Question

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

这是我的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/

javascript函数在第二次点击时执行

1 个答案: