Функция строки меню не работает javascript

Я пытаюсь написать строку меню в левой части экрана, которая уже настроена как div с размытием идентификатора. Я установил другое изображение с идентификатором 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);

javascript html menubar css navbar
person Tomas Piaggio    schedule 18.05.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, вы закрыли функциональный блок 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;
person Grant Orndorff    schedule 18.05.2015
comment
Кроме того, чтобы добавить что-то к ответу, вот сокращенная версия кода в вопросе: jsfiddle.net/kn8dz4t6 /2. Некоторые блоки if были избыточными, и вы можете воспользоваться преимуществами falsy и truthy внутри логических операторов. - person ; 18.05.2015