jQuery переключение между 2 функциями внутри события щелчка

Question

Я изучаю jQuery, и мне кажется, что это не работает.

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

У меня есть 2 функции, одна для отключения прокрутки документа, другая для ее возврата:

function disableScroll(){...}
function enableScroll(){...}

И здесь у меня есть событие щелчка значка переключателя:

$("#main-nav-toggler").click(function() {
        $("#main-nav-menu").toggleClass("menu-show");
        disableScroll();
});

Проблема в том, что я не знаю, как переключаться между двумя функциями прокрутки в событии щелчка переключателя. Я знаю только, как вызвать одну функцию, я не знаю, как переключаться между двумя при щелчке.

Answer 1

Вы можете проверить, есть ли у main-nav-menu класс .menu-show

$("#main-nav-toggler").click(function() {
    $("#main-nav-menu").toggleClass("menu-show");
    if($("#main-nav-toggler").hasClass("menu-show")){
        disableScroll();
    } else{
        enableScroll()
    }
 });

Jquery документация hasClass (): https://api.jquery.com/hasClass/

Answer 2

Вы можете использовать функцию hasClass(), чтобы проверить, какую функцию вам нужно вызвать.

$("#main-nav-toggler").click(function() {
        $("#main-nav-menu").toggleClass("menu-show");
        $("#main-nav-menu").hasClass("menu-show") ? disableScroll() : enableScroll();
});

function disableScroll(){
  console.log("disable scroll");
}
function enableScroll(){
  console.log("enable scroll");
}

#main-nav-menu {
  display: none;
}

#main-nav-menu.menu-show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-nav-toggler">toggler
</div>
<div id="main-nav-menu">menu
</div>