如何在AJAX更改后使if / else读取全局变量

Question

我正在使用Craft CMS并使用javascript通过AJAX加载页面。 我使用全局javascript变量来确定我的导航菜单是打开还是关闭。 Simple menuOpen = false或menuOpen = true 。 然后打开或关闭菜单：

$(".header a.nav").on("touchstart click", function(e){
  e.stopPropagation();
  e.preventDefault();

  if ( menuOpen == true ){
    closeMenu();
  } else if ( menuOpen == false ) {
    openMenu();
  }
});

openMenu = function() {
  $("body").addClass("menu-open");
  $("nav.menu").removeClass("is-closed").addClass("is-open");
  $("header a.nav").addClass("x").removeClass("menu");
  menuOpen = true;
}

closeMenu = function() {
  $("body").removeClass("menu-open");
  $("header a.nav").addClass("menu").removeClass("x");
  $("nav.menu").removeClass("is-open").addClass("is-closed");
  menuOpen = false;
  setTimeout(function(){
    $("nav.menu").removeClass("is-closed");
  }, 150);
}

当我通过AJAX更改页面时，我必须关闭菜单，因此在我的AJAX成功函数中，我运行closeMenu()以确保在显示新页面时它已关闭。

$.ajax({
  type: 'POST',
  url: href,
  data: {},
  success: function(result){
    // Add in new content
    $main.html(result);
    // close menu
    closeMenu();
    // lots of other stuff omitted here to show you the relevant part
  }
});

我的问题是，在加载AJAX页面后，当我再次打开菜单时，看起来好像没有正确读取全局变量menuOpen ，或者if语句以某种方式失败。

结果是menuOpen和menuClose函数似乎同时运行，即使if语句只允许运行一个或另一个。 这意味着在任何AJAX页面加载后菜单永远不能打开，因为它同时关闭打开。

我使用/更改变量的方式有什么问题，或者我的if语句出了什么问题？

Answer 1

由于您已经通过向body添加和删除css类来指示状态，因此您可以只查找这些类，而不是使用变量来污染全局空间。

(document.body.classList.contains('menu-open') ? closeMenu : openMenu)()

Answer 2

var menuOpen = false;

只需将它放在代码顶部“var”意味着它使变量成为全局变量

Answer 3

找到了自己的解决方案 如果在AJAX页面加载后触发，则事件处理程序多次连接，导致函数同时运行两次或更多次。 添加了$(".header a.nav").off(); 在我的$(".header a.nav").on(...); 它按预期工作。