調整窗口大小時，不會隱藏“關閉畫布”菜單

Question

請幫忙！！！ 我正在關閉畫布菜單上工作（ https://codepen.io/oleksiukmary/pen/MEGpZj ）。 問題是當移動菜單打開並且用戶調整窗口大小時-內容仍然具有transform屬性和疊加。 用戶調整窗口大小時如何返回初始參數？ 我是否應該僅通過js檢查窗口調整大小是否超過768px（我的斷點），然后隱藏覆蓋並轉換內容？

我的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()來檢測窗口大小並停用畫布

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