Сценарий, выполняющийся только один раз

Question

Я пытаюсь создать меню сбоку, которое открывается и закрывается слева, когда вы нажимаете кнопку меню. Получил код css, html работает нормально, но я не могу понять, что я делаю неправильно со сценарием. Он работает отлично, но только один раз: когда я нажимаю кнопку меню, он выходит, снова нажимайте его, и он возвращается в нужном направлении. Проблема в том, что если я снова нажму на нее, она появится, и она вернется сама собой. Может кто-нибудь мне помочь? Вот мой сценарий:

$(document).ready(function(){ 

$('.menu-icon').click(function(){ 
    $('#navigator').animate({left:'0px'},200); 
    $(this).animate({left:'250px'},200); 
    $('.menu-icon').click(function(){ 
     >$('#navigator').animate({left:'-250px'},200); 
     >$(this).animate({left:'0px'},200); 
}); 
}); 
>}); 

Answer 1

Вы разместили обработчик щелчка внутри обработчика щелчка так будет выполняться несколько раз. Дважды в первый раз, затем три раза, затем четыре раза и т. Д.

Вам необходимо иметь один обработчик и решить, как анимировать на основе текущего состояния элемента. например что-то вроде следующего (не тестировался):

$(document).ready(function() { 

    $('.menu-icon').click(function() { 
     if ($('#navigator').css("left") != "0px") { 
      $('#navigator').animate({ 
       left: '0px' 
      }, 200); 
      $(this).animate({ 
       left: '250px' 
      }, 200); 
     } else { 
      $('#navigator').animate({ 
       left: '-250px' 
      }, 200); > $(this).animate({ 
       left: '0px' 
      }, 200); 
     } 
    }); 
}); 

Я хотел бы предложить тестирование «текущее состояние», используя класс вы переключаетесь на элементе в качестве значений тестирования КСС ненадежны во время анимации.

например. что-то вроде:

if ($('#navigator').toggleClass("open").hasClass("open")) { 

Answer 2

Здесь вы прикрепляете прослушиватель событий щелчка два раза. Один нормальные и один после нажатия, вот почему его происходит использование JQuery переключения

или использовать таким образом

$(document).ready(function(){ 

    $('.menu-icon').click(function(){ 
    var navigator = $('#navigator'); 
    if(navigator.offset().left == 0) 
    { 
     navigator.animate({left:'-250px'},200); 
     $(this).animate({left:'0px'},200); 
    } 
    else 
    { 
     navigator.animate({left:'0px'},200); 
     $(this).animate({left:'250px'},200); 
    } 

    }); 
});