한 번만 실행되는 스크립트

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

: 여기 내 스크립트입니다. 처음 두 번, 세 번, 네 번 등

의 현재 상태를 기반으로 단일 처리기를 사용하고 에 애니메이션을 적용하는 방법을 결정해야합니다. 예 : (하지 테스트) 다음과 같은 : 나는 당신이 테스트 CSS의 값으로 요소를 전환 클래스를 사용하여 "현재 상태를"테스트 제안

$(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

여기에서 클릭 이벤트 수신기를 두 번 연결합니다. 이 방법

$(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); 
    } 

    }); 
});