Jquery - Переключение между 2 функциями при нажатии

Question

Я реализую Headroom.js на одном из моих сайтов. Из-за удобства использования я должен иметь возможность переключаться между инициализацией и уничтожением скрипта, когда пользователь нажимает на определенный div. Идентификатор этого div - #hamburger

Это мой код до сих пор.

$(document).ready(function(){
  $("#hamburger").click(function(){
    $(".banner").headroom("destroy");
  });
}); 

Прямо сейчас, когда пользователь нажимает, сценарий Headroom уничтожается.

Тем не менее, как я могу сделать скрипт для инициализации, если пользователь снова нажимает тот же div?

Я знаю, что это сделано с помощью:

        $(".banner").headroom("init");

но я не знаю, как построить это с помощью jQuery.

Любая помощь приветствуется.

Спасибо!

Answer 1

Добавьте переменную для отслеживания состояния скрипта и проверьте ее в обработчике события click:

$(document).ready(function(){
    var isActive = true;
    $("#hamburger").click(function(){
        if (isActive) {
            $(".banner").headroom("destroy");
            isActive = false;
        }
        else {
            (".banner").headroom("init");
            isActive = true;
       }
    });
}); 

Answer 2

Вы можете сделать это, добавив класс on и off к вашему элементу #hamburger. Затем вы можете добавить этот скрипт, чтобы он переключался:

$(document).ready(function(){
  $("#hamburger").click(function(){
    if ($(this).hasClass('on')) {
        $(".banner").headroom("destroy");
        $(this).removeClass('on').addClass('off');
    } else {
        $(".banner").headroom("init");
        $(this).removeClass('off').addClass('on');
    }
  });
});