屏幕调整几次后响应菜单消失

【问题标题】：Responsive menu disappears when screen resized a few times屏幕调整几次后响应菜单消失
【发布时间】：2016-11-02 01:58:43
【问题描述】：

当屏幕恢复到最大宽度时，我的响应式菜单会消失。我使用的是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;
  };
});

【问题讨论】：

您应该使用 CSS 媒体查询来获得自动宽度可见性。仅对点击事件使用 JS
如果该功能不存在，则在浏览页面时默认显示下拉菜单。它隐藏了一半的屏幕。

标签： jquery css responsive-design

【解决方案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;}
}

【讨论】：