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 Media查询处理此类问题。

但是如果您真的需要使用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
})

更改页面大小时的导航布局，而无需刷新

1 个答案: