Основное меню JQuery переключения для мобильных устройств не работает

Question

У меня есть очень основное меню переключения с помощью JQuery-х on: tap, который не работает:

<nav id="mobile-nav"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     etc... 
    </ul> 
</nav> 

<div id="anchor"> 
    <header> 
     <img src="menu-icon.png"> 
    </header> 
</div> 

Затем

$(document).ready(function() { 
    var speed = "fast"; 

    $("#anchor").addClass("hidden"); 

    $("#anchor.hidden header img").on("tap", function() { 
     $("#mobile-nav").animate({ 
      left: "0px" 
     }, speed); 

     $("header").animate({ 
      left: "252px" 
     }, speed); 

     $("#anchor").removeClass("hidden"); 
     $("#anchor").addClass("active"); 
    }); 

    $("#anchor.active header img").on("tap", function() { 
     $("#mobile-nav").animate({ 
      left: "-252px" 
     }, speed); 

     $("header").animate({ 
      left: "0" 
     }, speed); 

     $("#anchor").removeClass("active"); 
     $("#anchor").addClass("hidden"); 
    }); 

}); 

#mobile-nav является ДИВ, который 250px в width и устанавливается в absolute position с left из -252px, который затем устанавливается на 0, когда значок изображения отображается (делает его слайдом). Как вы можете видеть, после того, как он выйдет, он должен удалить класс hidden и добавить класс active. Затем я установил пользовательскую функцию tap, чтобы сдвинуть ее назад и удалить класс active и добавить hidden еще раз. Он будет выдвигаться, но не откидывается назад. Что я делаю не так?

Answer 1

Я думаю, проблема заключается в том, что у вас есть несколько событий, вызванных нажатием на изображение. Попробуйте что-то вроде этого:

$(document).ready(function() { 
    var speed = "fast"; 

    $("#anchor").addClass("hidden"); 

    $("#anchor header img").on("click", function() { 
     $('#anchor').hasClass('active') ? left = '-=252px' : left = '+=252px'; 
     $("#mobile-nav, header").animate({'left': left}, speed);  
     $("#anchor").toggleClass("hidden active"); 
    }); 

}); 

Fiddle