重置屏幕變化的移動切換按鈕條件

Question

我有一個移動漢堡菜單，通過css動畫「打開」和「關閉」。如果屏幕放大> 768px，則顯示手機菜單display:none和全屏菜單。

HTML

<button id="nav-icon" class="toggle-nav"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
</button> 

jQuery的

// Toggle x 
$(document).ready(function(){ 
    $('#nav-icon').click(function(){ 
    $(this).toggleClass('open'); 
    }); 
}); 

但是，如果我有移動菜單中打開並更改屏幕尺寸> 768px菜單display:none（我把它重新設置爲隱藏），但切換按鈕保持'打開'，所以切換按鈕的功能是反向的（打開動畫關閉它，反之亦然）

我希望按鈕來重置，如果屏幕s卡萊斯回至< 768px（響應）

Answer 1

在你$(document).ready功能：

var mobileSize = 768; 
var pastWidth = $(window).width(); 
$(window).resize(function(){ 
    var width = $(this).width(); 
    if((width < mobileSize && pastWidth > mobileSize) || (width > mobileSize && pastWidth < mobileSize)) { 
    $('#nav-icon').removeClass('open'); 
    } 
    pastWidth = width; 
});