Jquery-单击时在两个函数之间切换

Question

我正在我的一个网站上实现Headroom.js。由于可用性的原因，当用户点击特定的div时，我需要能够在初始化和销毁脚本之间切换

到目前为止，这是我的代码。

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

现在，当用户单击时，Headroom脚本将被销毁。

但是，如果用户再次单击同一个div，我如何使脚本初始化呢？

我知道它是用完成的

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

但是我不知道如何使用jQuery来构造它。

感谢您的帮助。

谢谢！

Answer 1

添加一个变量来跟踪脚本的状态，并在点击事件处理程序上进行检查：

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

Answer 2

您可以通过在#hamburger元素中添加一个on和off类来实现这一点。然后你可以添加这个脚本使其切换：

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