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包装在Immediately Invoked Function Expression中。所有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()毫无害处。

如何让这个javascript函数不使用全局变量？

2 个答案: