Question

请帮忙!!! 我正在处理画布菜单（https://codepen.io/oleksiukmary/pen/MEGpZj）。问题是当移动菜单打开并且用户调整窗口大小时 - 内容仍然会转换属性和叠加。当用户调整窗口大小时，如何返回初始参数？如果窗口调整大小超过768px（我的断点）然后隐藏叠加并转换内容，我应该通过js检查吗？

我的js：

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

Answer 2

尝试使用此代码块

$( window ).resize(function() {
  if($( window ).width() > 768) {
    $('.content-wrap').css('transform', 'translateX(0)');
  }
});

调整窗口大小时，不会隐藏画布菜单

2 个答案: