javascript - 使用 jQuery 切换导航栏，如果用户使用导航栏媒体查询停止工作

Question

我有一个默认设置为隐藏的导航栏。有一个汉堡包图标，单击该图标时，会使用一些 js/jquery 在隐藏/显示的导航栏之间切换。

我还有一个媒体查询，它将导航栏设置为始终显示在较小的屏幕上，并将导航栏放置在页面顶部并显示为一行。我的问题是，如果我使用导航栏（切换它以显示，然后切换回隐藏）我的媒体查询不起作用，并且当断点被击中时导航栏永远不会出现。

这是代码：

导航栏 CSS，默认状态：

.navbar-hidden{
  grid-row-start: 2;
  display: flex;
  flex-direction: column;
  max-width: 300px;
  display: none;
  justify-content: flex-start;
  height: 100%;
 }

针对导航栏的 JS/jQuery：

$(document).ready(function(){
 $("#menu").click(function(event){
   event.preventDefault();
   $(".navbar-hidden").toggle();
 })
});

在断点之后针对隐藏导航栏（现在应该始终显示）的媒体查询：

@media screen and (max-width: 1200px) {
  .navbar-hidden {
    display: show !important;
    grid-row-start: 1;
    grid-column-start: 2;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 3em;
    min-width: 100%;
  }

标签： javascriptjqueryhtmlcss