Javascript 调整浏览器窗口大小时不显示响应导航栏

更改浏览器窗口的大小时，如果导航栏关闭，并且我从移动视图转到桌面，导航栏将保持关闭状态，不再可见

如果我执行上述操作，但在触发导航栏打开并更改浏览器窗口的大小后，导航栏仍然可见

如何确保在桌面上查看时导航栏始终可见

这是从我的项目中提取的完整代码：

$（文档）.ready（函数（）{
$（“#导航按钮”）。单击（函数（）{
$（“.navigation”）.slideToggle（“慢速”，函数（）{
});
});
});
/*导航*/
.导航{
列表样式：无；
保证金：0；
背景色：#333333；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：柔性端；
}
.导航a{
文字装饰：无；
显示：块；
填充：1em；
颜色：#ffffff；
证明内容：之间的空间；
}
李先生{
列表样式类型：无；
显示：内联flex；
弯曲方向：行；
证明内容：之间的空间；
文本对齐：居中；
}
.导航a:悬停{
背景：#4444；
颜色：#61D6D6；
}
@介质和全部（最大宽度：800px）{
李先生{
显示：块；
弯曲方向：立柱；
}
.导航{
证明内容：周围的空间；
显示：无；
}
#导航按钮{
显示：块；
}
}

乱数假文

菜单







您可以在javascript中使用“窗口大小调整”来检查视口宽度并更改样式

window.onresize = function(event) {
    ...
};

或者使用jquery

$(window).resize(function () { /* do something */ });

slideToggle
将
display:none
应用于元素的
style
属性，因此您不能用样式表覆盖该属性，因此您必须侦听窗口的大小调整事件并相应地显示菜单，这里有一个小问题：

这是我在使用响应式菜单时遇到的一个常见问题，但我不再为此烦恼，因为访问者不会通过调整窗口大小、关闭菜单然后再次调整大小来进行游戏。所以我想这不是一个真正的问题，而是UAGEAR的一个特殊案例，我同意它不会是一个共同的问题，但我仍然认为这是一个我想解决的问题。如果访问者在执行多任务时只是将两个窗口并排放置，然后在完成任务后再次增大大小，则可能会触发此问题。在这种情况下，唯一的解决方案是让侦听器调整窗口大小，并在桌面上显示导航。
$(document).ready(function() {

  $("#navButton").click(function() {
    $(".navigation").slideToggle("slow", function() {});
  });
  $(window).on('resize', function() {

    if ($(this).width() > 800) {
      $('.navigation').css({
        'display': 'flex'
      });
    } else {
      $('.navigation').css({
        'display': 'none'
      });
    }
  });
});