导航栏在较小的屏幕上隐藏和显示切换会使较大的屏幕混乱

Question

我一直在尝试使用Flexbox使我的导航栏可折叠。当屏幕较小时，导航栏可以正确切换。但是，当您在较小的屏幕上隐藏导航项目然后将屏幕放大时，导航项目将不会显示。如果我在屏幕较小时将其保持打开状态，则将屏幕放大，然后将导航项的伸缩方向设置为在屏幕较大时不希望使用的列。

这是我的代码：

$(".toggle-btn").click(function() {
  $(".nav-toggle").slideToggle("slow");
});

/* header */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2em;
  background-color: #FFB600;
  box-shadow: 0 1px 20px #48493e;
  z-index: 1;
}

header ul {
  display: flex;
}


/*slide menu*/

.nav-btn {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  margin: 3.5em 4em 0 0;
}

.toggle-btn {
  position: relative;
  padding: 0;
  width: 4em;
  height: 2em;
  cursor: pointer;
  outline: none;
  font-size: 1.2em;
  font-family: 'Dosis', sans-serif;
  font-weight: bold;
  box-shadow: 5px 5px 5px 1px #000;
  text-transform: uppercase;
  border-radius: 4px;
  border: solid 2px #000;
  background-color: transparent;
}

.toglge-btn:active {
  box-shadow: 3px 3px 5px 1px #000;
  top: 2px;
}

@media all and (max-width: 820px) {
  header {
    flex-direction: column;
  }
  .nav-brand {
    align-self: flex-start;
  }
  .nav-btn {
    display: block;
  }
  header ul {
    flex-direction: column;
    text-align: center;
    display: none;
  }
  .nav-items {
    line-height: 2;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h2 class="nav-brand"><a href="/"> Tequila Grill</a></h2>
  <div class="nav-btn">
    <button class="toggle-btn">Menu</button>
  </div>
  <ul class="nav-toggle">
    <li><a class="nav-items" href="/">Home</a></li>
    <li><a class="nav-items" href="/menu">Menu</a></li>
    <li><a class="nav-items" href="/hours">Hours</a></li>
    <li><a class="nav-items" href="/location">Location</a></li>
    <li><a class="nav-items" href="/catering">Catering</a></li>
  </ul>
</header>

Answer 1

你在这里兄弟

@media all and (min-width: 821px) {
  ul.nav-toggle[style] {
    display:flex!important;
  }
  }

这将告诉它在所有display:flex;和更大的所有视口中添加样式821px。 [style]选择器会像JS一样内联插入CSS。

https://jsfiddle.net/ud8fqxmL/5/

Answer 2

function resiz() {
  $(".toggle-btn").click(function() {
    $(".nav-toggle").slideToggle("slow");
  });
}
resiz();

$(window).on('resize', function() {
  resiz();
});

它将起作用