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

请帮忙!!! 我在画布菜单上工作（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

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

回答

相关问题