Question

我试图在屏幕左侧写一个菜单栏，该菜单栏已经设置为带有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);

Answer 1

看起来你太早关闭了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;

菜单栏功能不起作用javascript

1 个答案: