[英]JavaScript function does not fire
我正在构建一个使用JavaScript来使顶部菜单下拉并关闭的移动页面,但是它不起作用。 这是JS
<script>
window.onload = function () {
var elem = document.getElementById('navBarMobile');
var burger = document.getElementById('hamburgerMobile');
var cross = document.getElementById('crossMobile');
}
function menuExpand() {
elem.style.transition = "height 1s linear 0s";
elem.style.height = "292px";
burger.style.transition = "opacity 0.5s linear 0s";
burger.style.opacity = "0";
burger.style.zIndex = "0";
cross.style.transition = "opacity 0.5s linear 0.5s"
cross.style.opacity = "1";
cross.style.zIndex = "1";
}
function menuClose() {
elem.style.transition = "height 1s linear 0s";
elem.style.height = "87px";
burger.style.transition = "opacity 0.5s linear 0.5s";
burger.style.opacity = "1";
burger.style.zIndex = "1";
cross.style.transition = "opacity 0.5s linear 0s";
cross.style.opacity = "0";
burger.style.zIndex = "0";
}
</script>
和HTML
<div id="hamburgerMobile" onclick="menuExpand();"></div>
<div id="crossMobile" onclick="menuClose();"></div>
以前,我在函数内部指定位置的顶部看到了声明语句,但是每个函数仅触发一次。
变量elem
, burger
和cross
在不同的范围内定义,并且在您的函数中不可见。
您应该尽早声明:
var elem;
var burger;
var cross;
window.onload = function () {
elem = document.getElementById('navBarMobile');
burger = document.getElementById('hamburgerMobile');
cross = document.getElementById('crossMobile');
}
阅读有关功能范围的信息: http : //www.w3schools.com/js/js_scope.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.