如何使此javascript函数不使用全局变量？

Question

单击此function可切换汉堡图标的活动状态。 此外，仅在下拉列表处于打开状态时，单击文档的任何位置也可以执行相同操作。

var dropdownOpen = false;

$(".hamburger").click(function () {
    $(this).toggleClass('is-active');
    dropdownOpen = !dropdownOpen;
});

$(document).ready(function(){
    $(document).click(function(e){
        if ($(e.target).is('.hamburger')) {
            return;
        }
        else if (dropdownOpen === true)
        {
            $(".hamburger").toggleClass('is-active');
            dropdownOpen = false;
        }
    });
});

如何合并两个单击事件，这样就不必使用全局变量了？

我已经试过了：

$(document).ready(function(){
    var dropdownOpen = false;

    $(document).click(function(e){
        if ($(e.target).is('.hamburger')) {
            $('.hamburger').toggleClass('is-active');
            dropdownOpen = !dropdownOpen;
        }
        else if (dropdownOpen === true)
        {
            $(".hamburger").toggleClass('is-active');
            dropdownOpen = false;
        }
    });
});

..但是没有用，有什么想法吗？

Answer 1

您可以将所有JS包装在立即调用的函数表达式中 。 所有JS变量均不限于此函数表达式，而不能全局使用。

(function() {
  var dropdownOpen = false;

  $(".hamburger").click(function() {
    $(this).toggleClass('is-active');
    dropdownOpen = !dropdownOpen;
  });

  $(document).ready(function() {
    $(document).click(function(e) {
      if ($(e.target).is('.hamburger')) {
        return;
      } else if (dropdownOpen === true) {
        $(".hamburger").toggleClass('is-active');
        dropdownOpen = false;
      }
    });
  });
})();

Answer 2

根本不需要全局变量。

$(document).click(function(e) {
    if ($(e.target).is(".hamburger")) {
        $(e.target).toggleClass("is-active");
    } else {
        $(".hambuger").removeClass("is-active");
    }
}

如果该类不存在，调用removeClass()不会有任何危害。