Zurücksetzen der mobilen Umschalttaste Bedingung auf dem Bildschirm ändern

Question

Ich habe ein mobiles Hamburger-Menü, das durch css "offen" und "geschlossen" animiert. Wenn der Bildschirm> 768px vergrößert, wird das mobile Menü display:none und ein Vollbildmenü angezeigt.

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

jedoch Wenn ich das Handy-Menü geöffnet und die Bildschirmgröße> ändern 768px das Menü display:none (ich habe es zu verstecken zurückgesetzt), aber die Toggle-Taste bleibt "offen", so dass die Funktionalität der Toggle-Taste umgekehrt ist (offene Animation schließt sie und umgekehrt)

Ich möchte die Taste zurücksetzen, wenn der Bildschirm s Cales zurück zu < 768px (reaktions)

Answer 1

In Ihrer $(document).ready Funktion:

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; 
});