jquery - Jquery - 单击时在两个功能之间切换

Question

我正在我的一个网站中实施 Headroom.js。由于可用性原因，当用户单击特定 div 时，我需要能够在初始化和销毁​​脚本之间切换。这个 div 的 id 是#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

您可以通过向 #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');
    }
  });
});