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

【问题标题】：Jquery - Toggle between 2 functions when clickingJquery - 单击时在两个功能之间切换
【发布时间】：2016-01-03 21:07:36
【问题描述】：

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

这是我目前的代码。

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

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

但是，如果用户再次单击相同的 div，我怎样才能使脚本初始化？

我知道它已经完成了：

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

但我不知道如何使用 jQuery 构建它。

感谢任何帮助。

谢谢！

【问题讨论】：

标签： jquery click headroom.js

【解决方案1】：

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

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

【讨论】：

【解决方案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');
    }
  });
});

【讨论】：