如何使屏幕上的任意位置单击关闭由jQuery toggle(）函数控制的移动菜单

How to make a click anywhere on the screen close mobile menu that is controlled by jQuery toggle() function?

本文关键字：toggle jQuery 函数 移动 控制 菜单 屏幕 何使 任意 位置 单击      更新时间：2023-09-26

我的移动菜单由jQuery toggle()函数打开/关闭。除了能够通过再次单击用于打开它的相同汉堡图标来关闭它之外，我还希望能够通过在打开时单击屏幕上的任意位置来关闭它。但是，单击屏幕上的任意位置会通过以下方式"干扰"toggle()功能：菜单打开后，如果我通过单击屏幕上的任意位置将其关闭，然后再次单击移动菜单图标将其打开，它仅在我第二次单击它时起作用（因为toggle()功能没有"知道"我通过单击屏幕关闭了菜单）。

如何解决这个问题？

.JS：

$( '.header__menu_icon' ).toggle( function() {
  $( '.wrap' ).removeClass( 'mobile_menu_opening mobile_menu_closing' );
  $( '.wrap' ).addClass( 'mobile_menu_opening' ); 
}, function() {
  $( '.wrap' ).removeClass( 'mobile_menu_opening mobile_menu_closing' );
  $( '.wrap' ).addClass( 'mobile_menu_closing' ); 
});
$( document ).click(function() {
  $( '.wrap' ).removeClass( 'mobile_menu_opening mobile_menu_closing' );
  $( '.wrap' ).addClass( 'mobile_menu_closing' ); 
});
$( '.mobile_menu' ).click(function(event) {
  event.stopPropagation();
});

.HTML：

<body>
<div class='wrap'>
  <div class='header'>
    <div class='mobile_menu'>
      ...
    </div>
  </div>
</div>
</body>

.CSS：

@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();
});

使用 NOT 说明符

$( "body:not(.mobile_menu)" ).click(function() {
    $("").removeClass("");
    - or -
   $("").toggle("");
});
相关文章：