如何使此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()不會有任何危害。