當屏幕調整大小几次時，響應式菜單消失

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