我正在尝试在屏幕的左侧写一个菜单栏,该菜单栏已经设置为具有id模糊的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);

最佳答案

您似乎太早关闭了blurAppearance功能块。

右上方的右括号

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;

10-05 20:38
查看更多