当屏幕调整大小几次时，响应式菜单消失

Question

当屏幕返回到最大宽度时，我的响应式菜单消失。我用this code但是我修改了一下

$(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

您应该使用windows resize event再次给您打电话的功能上的调整

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

我做了那些修改自己的代码在这里的窗口： https://jsfiddle.net/jfhLmgvc/2/

---

这段代码也可以更简化一点，像这样的一个css： https://jsfiddle.net/jmbup8g3/

脚本：

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

的CSS：

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