Das Responsive-Menü verschwindet, wenn die Bildschirmgröße einige Male geändert wird

Question

Mein Responsive-Menü verschwindet, wenn der Bildschirm auf die maximale Breite zurückkehrt. Ich war mit this code aber ich verändert es ein bisschen

$(function() { 
    if ($(window).width() < 700) { 
    var menuVisible = false; 
    $('#menuBtn').click(function() { 
     if (menuVisible) { 
     $('#menu').css({'display':'none'}); 
     menuVisible = false; 
     return; 
     } 
     $('#menu').css({'display':'block'}); 
     menuVisible = true; 
    }); 

    $('#menu').click(function() { 
     $(this).css({'display':'none'}); 
     menuVisible = false; 
    }); 
    }else{ 
    menuVisible = true; 
    }; 
}); 

Answer 1

sollten Sie windows resize event verwenden, um Sie wieder aufrufen Funktion das Fenster auf Ändern der Größe

$(window).resize(function(){ 
    if ($(window).width() > 700) { 
     $('#menu').css({'display':'block'}); 
    } 
}) 

ich diese Änderungen an Ihrem Code hier gemacht: https://jsfiddle.net/jfhLmgvc/2/

---

Dieser Code kann auch einfacher sein, mit einem kleinen CSS wie folgt: https://jsfiddle.net/jmbup8g3/

Das Skript:

$(function() { 
    $('#menuBtn').click(function() { 
    if($(window).width() < 700){ 
     $('#menu').fadeToggle(300); 
    } 
    }); 
    $('#menu').click(function() { 
    if($(window).width() < 700){ 
     $(this).css({'display':'none'}); 
    } 
    }); 
}); 

die CSS:

@media screen and (min-width: 700px) { 
    #menu{display:block !important;} 
}