調整窗口大小時不隱藏畫布菜單

請幫忙!!! 我在畫布菜單上工作（https://codepen.io/oleksiukmary/pen/MEGpZj）。問題是當移動菜單打開並且用戶調整窗口大小時 - 內容仍然會改變屬性和覆蓋。如何在用戶調整窗口大小時返回初始參數？我應該通過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)'); 
    }); 
});

來源

2017-10-10 Mary Oleksiuk

是的，你說得對。您需要添加一個調整大小處理程序，並在其中，您需要檢查視口/窗口的新寬度，並根據需要隱藏菜單，覆蓋，轉換等。 –

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

來源

2017-10-10 06:06:01

不應該是'if（$（window）.width（）> 768）' –

不，這意味着如果你打開菜單並調整它的大小到768以上，offcanvas將會失效 –

使用<768，我測試過在代碼範圍 –

嘗試用這個代碼塊

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

來源

2017-10-10 06:06:46 sajee

調整窗口大小時不隱藏畫布菜單

回答

相關問題