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

javascript function executing on second click

本文关键字：执行 第二次 函数 Javascript      更新时间：2023-09-26

我需要折叠/展开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仅从style属性获取信息，而不是计算样式。你可以用window.getComputedStyle来代替，但我觉得它不够灵活。相反，你应该有一个变量来跟踪元素的可见性状态。

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

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

相关文章：