如何使此 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()也没有什么坏处。