jQuery на клике, требующем двух кликов после первого

Question

Я просмотрел похожие вопросы и прочитал предлагаемые решения, но, похоже, каждый случай в отношении этой проблемы отличается.

Очень просто, когда я нажимаю значок своего меню в первый раз, появляется мое экранное меню. Каждый раз после первого требуется два нажатия или два клика для активации меню выноса.

JQuery -

$('.slideout-menu-toggle').on('click', function(event){ 
    event.preventDefault(); 

    // create menu variables 
    var slideoutMenu = $('.slideout-menu'); 
    var slideoutMenuWidth = $('.slideout-menu').width(); 

    // toggle open class 
    slideoutMenu.toggleClass("open"); 

    // slide menu 
    if (slideoutMenu.hasClass("open")) { 
     slideoutMenu.animate({ 
      left: "0px" 
     }); 
    } else { 
     slideoutMenu.animate({ 
      left: -slideoutMenuWidth 
     }, 250);  
    } 
}); 


$('.slideout-menu-close').on('click', function(event){ 
    event.preventDefault(); 
    // create menu variables 
    var slideoutMenu = $('.slideout-menu'); 
    var slideoutMenuWidth = $('.slideout-menu').width(); 

    // toggle open class 
    slideoutMenu.toggleClass("open"); 

    // slide menu 
    if (slideoutMenu.hasClass("open")) { 

     slideoutMenu.animate({ 
      left: -slideoutMenuWidth 
     }, 250);  

    } else { 
     slideoutMenu.animate({ 
      left: "0px" 
     }); 
    } 

}); 

Вы можете посмотреть демо проблемы просмотра через смартфон на www.chrismazzochi.com.

Спасибо вам за помощью, Chris

Answer 1

Вы столкнулись с этой проблемой, потому что вы переключаетесь класс перед проверкой класса «открытой» с помощью hasClass(). Просто переключите класс «открыть» после проверки состояния.

Попробуйте это:

$('.slideout-menu-toggle').on('click', function (event) { 
     event.preventDefault(); 
     // create menu variables 
     var slideoutMenu = $('.slideout-menu'); 
     var slideoutMenuWidth = $('.slideout-menu').width(); 

     // toggle open class 
     slideoutMenu.toggleClass("open"); 

     // slide menu 
     if (slideoutMenu.hasClass("open")) { 
      slideoutMenu.animate({ 
       left: "0px" 
      }); 
     } else { 
      slideoutMenu.animate({ 
       left: -slideoutMenuWidth 
      }, 250); 
     } 
    }); 


    $('.slideout-menu-close').on('click', function (event) { 
     event.preventDefault(); 
     // create menu variables 
     var slideoutMenu = $('.slideout-menu'); 
     var slideoutMenuWidth = $('.slideout-menu').width(); 

     // toggle open class 
     if (slideoutMenu.hasClass("open")) { 

      slideoutMenu.animate({ 
       left: -slideoutMenuWidth 
      }, 250); 

     } else { 
      slideoutMenu.animate({ 
       left: "0px" 
      }); 
     } 
     // toogle class after condition check 
     slideoutMenu.toggleClass("open"); 
    });