javascript - 菜单栏功能无法使用 javascript

Question

我正在尝试在屏幕左侧编写一个菜单栏，该菜单栏已设置为 ID 为 blur 的 div。我设置了另一个具有 id menuImage 的图像，它实际上是一个应该打开菜单栏的齿轮图标，但它根本不会响应，我无法弄清楚为什么。请帮助我，我坚持这个。这是代码:

var state = false;
var opacity = 0.0;
var menuImage = document.getElementById("menuImage");
var blur = document.getElementById("blur");

var blurAppearence = function(){
    if(state == false){
        state = true;
    } else {
        if(state == true){
            state = false;
        }
    }
}
if(state == false){
    var disappearence = function(){
        if(opacity <= 0.4){
            blur.style.opacity = opacity;
        } else {
            clearInterval(timer)
        }
        opacity += 0.1;
    }
   var timer = window.setInterval(appearence, 50);

} else {

    if(state == true){
        var appearence = function(){
            if(opacity >= 0.0){
                blur.style.opacity = opacity;
            } else {
                clearInterval(timer2);
            }
            opacity -= 0.1;
        }
       var timer2 = window.setInterval(appearence, 50);
    }
}


menuImage.addEventListener("click", blurAppearence);

Answer 1

看来您过早关闭了 blurAppearance 功能 block 。

线正上方的右大括号

if(state == false){

实际上应该在行的前面

menuImage.addEventListener("click", blurAppearence);

您的第一个 window.setInterval 也应该调用消失函数。

参见 https://jsfiddle.net/orndorffgrant/cfrc5b55/

你也可以替换你的

if(state == false){
    state = true;
} else {
    if(state == true){
        state = false;
    }
}

阻止:

state = !state;