JavaScript 函数不触发

Question

我正在构建一个移动页面，该页面使用 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>

以前，我在函数内指定位置的顶部看到了声明语句，但每个函数只触发一次。

Answer 1

变量 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