更改页面上的导航布局，而无需刷新

Question

当我使视口较小时，我的导航无法正确显示。当我刷新页面时，它可以正常工作。但是，如果我再次使它变得更大，我的导航就消失了。我想念什么？我尝试以另一种方式编写代码，但我的经验还不够。

我希望它直接显示它应该是如何的，不是我在调整视口大大时必须刷新页面。

$(document).ready(function() {
  if ($(window).width() < 800) {
    $('.dropdown').hide();
    $('.fa-bars').click(function() {
      $("ul").toggleClass("toggled");
      $('.dropdown').slideToggle();
    })
  }
})

  @media screen and (max-width: 800px) {
  header {
    position: fixed;
    z-index: 1;
    height: auto;
    width: 35vw;
  }
  nav ul {
    flex-direction: column;
    border-radius: 0 0 20px 0;
    width: 230px;
    padding-bottom: 10px;
    margin-left: 70px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <nav>
    <ul>
      <li id="mobileDropdown">
        <a href="index.html" title="Home"><img id="Logo" src="../Images/Logo.svg"></a>
        <i class="fas fa-bars"></i>
      </li>
      <li class="rectangle dropdown"><a href="ueber_mich.html">Über mich</a></li>
      <li class="rectangle dropdown"><a href="aktuell.html">Aktuell</a></li>
      <li id="AktuelleSeite" class="dropdown"><a href="portfolio.html">Portfolio</a></li>
      <li class="rectangle dropdown"><a href="angebot.html">Angebot</a></li>
      <li class="rectangle dropdown"><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </nav>
</header>

Answer 1

$(window).resize()是您在这种情况下应使用的。

注意：我强烈建议处理CSS媒体查询的此类问题。

但是，如果您确实必须与JS一起做。查看代码样本：

$(document).ready(function() {
  function fixNav() { // wrap your code in a function for later use;
    if ($(window).width() < 800) {
      $('.dropdown').hide();
      $('.fa-bars').click(function() {
        $("ul").toggleClass("toggled");
        $('.dropdown').slideToggle();
      })
    }
  }
  // now call fixNav()
  fixNav();
  $(window).resize(fixNav) // call fixNav() on window resize too
})