Javascript 如何在由jQuery toggle（）函数控制的屏幕关闭移动菜单上的任意位置进行单击？

我的移动菜单由jQuery

toggle（）

函数打开/关闭。除了能够通过再次单击用于打开它的汉堡图标来关闭它之外，我还希望能够在它打开时通过单击屏幕上的任何位置来关闭它。但是，这种点击屏幕上的任意位置会以以下方式“干扰”

toggle（）

功能：一旦菜单打开，如果我通过点击屏幕上的任意位置来关闭它，然后再次点击移动菜单图标来打开它，它只在我第二次点击它时起作用（因为

toggle（）

功能不“知道”我通过点击屏幕关闭了菜单）

如何解决这个问题

JS:

HTML:

---

我将通过简单地避免切换功能来实现这一点。此外，您的代码可以通过以下方式进行优化：

function menuToggle() {
  var openClass = 'mobile_menu_opening';
  var closedClass = 'mobile_menu_closing';
  var $wrap = $('.wrap');
  if ($wrap.hasClass(openClass)) {
    $wrap.removeClass(openClass);
    $wrap.addClass(closedClass);
  } else {
    $wrap.removeClass(closedClass);
    $wrap.addClass(openClass);
  }
}

$('.header__menu_icon').on('click', function() {
  menuToggle();
});

$(document).on('click', function() {
  menuToggle();
});

$('.mobile_menu').on('click', function(event) {
  event.stopPropagation();
});

使用NOT说明符

$( "body:not(.mobile_menu)" ).click(function() {
    $("").removeClass("");
    - or -
   $("").toggle("");
});

---

不确定“-或”-在逻辑上代表什么。使用您的代码，菜单会打开并立即关闭。您能将代码放在某个地方，以便我检查您的实现中的错误吗？它应该很好用

@keyframes mobile_menu_opening {
  0% { transform: translateX(0px); }
  100% { transform: translateX(-280px); }
}
@keyframes mobile_menu_closing {
  0% { transform: translateX(-280px); }
  100% { transform: translateX(0px); }
}
.mobile_menu_opening {
  animation-name: mobile_menu_opening;
  animation-duration: 2s;
}
.mobile_menu_closing {
  animation-name: mobile_menu_closing;
  animation-duration: 1s;
}
.wrap {
  position: relative;
}

function menuToggle() {
  var openClass = 'mobile_menu_opening';
  var closedClass = 'mobile_menu_closing';
  var $wrap = $('.wrap');
  if ($wrap.hasClass(openClass)) {
    $wrap.removeClass(openClass);
    $wrap.addClass(closedClass);
  } else {
    $wrap.removeClass(closedClass);
    $wrap.addClass(openClass);
  }
}

$('.header__menu_icon').on('click', function() {
  menuToggle();
});

$(document).on('click', function() {
  menuToggle();
});

$('.mobile_menu').on('click', function(event) {
  event.stopPropagation();
});

$( "body:not(.mobile_menu)" ).click(function() {
    $("").removeClass("");
    - or -
   $("").toggle("");
});