[英]javascript function executing on second click
我需要折叠/扩展div的宽度(而不是隐藏/显示),由于某种原因,我编写的这段代码似乎只能在第二次单击时开始工作。 如果它发出警报来检查变量,则似乎该变量最初并未采用样式。 有什么想法吗? 这是一个js小提琴:
这是我的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
仅从样式属性获取信息,而不从计算的样式获取信息。 您可以改用window.getComputedStyle
,但对我来说似乎不灵活。 相反,您应该只拥有一个变量,该变量可以跟踪元素所在的可见性状态。
您甚至可以在元素本身上使用.dataset
(假设您不需要支持IE),尽管任何变量都可以。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.