Question

我正在使用Craft CMS，并使用javascript通过AJAX加载页面。我使用全局javascript变量来确定我的导航菜单是打开还是关闭。简单的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

由于您已经通过在正文中添加和删除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(...);，它可以正常工作。

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

3 个答案: