javascript - 调整窗口大小时不隐藏 Canvas 外菜单

Question

求助!!!我正在处理 Canvas 外菜单(https://codepen.io/oleksiukmary/pen/MEGpZj)。问题是当移动菜单打开并且用户调整窗口大小时 - 内容仍然具有转换属性和覆盖。当用户调整窗口大小时如何返回初始参数？我是否应该通过 js 检查窗口调整大小是否超过 768px(我的断点)，然后隐藏叠加层并转换内容？

我的代码:

 $(document).ready(function() {
  $('#nav-toggle').click(function(){
    if($(this).is(":checked")) {
      $('.content-wrap').css('transform', 'translateX(80%)');
    } else {
      $('.content-wrap').css('transform', 'translateX(0)');
    }
    $('body').toggleClass('overflow-hidden');
    $('#c-mask').toggleClass('is-active');
  });

  $('#c-mask').click(function() {
    $('#overlay').fadeOut('slow');
    $(this).removeClass('is-active');
    $('#nav-toggle').prop('checked', false);
    $('.content-wrap').css('transform', 'translateX(0)');
  });
});

Answer 1

使用$( window ).resize(function() 检测窗口大小并停用offcanvas

  $( window ).resize(function() {
if ($(window).width() > 768) {
$('#overlay').fadeOut('slow');
$('#nav-toggle').prop('checked', false);
$('.content-wrap').css('transform', 'translateX(0)');
}
});