javascript - 移动导航消失

Question

目前，我正在尝试弄清楚为什么当我将浏览器置于移动 View 中时，我的移动导航就消失了。我似乎无法确定导致问题的原因，但是当我的导航处于移动 View 时，每次我缩小浏览器时它都消失了。如果有人能帮我解决这个问题，将不胜感激!谢谢!

我不得不将我的代码放在 JsFiddle 中，因为它有点太长了。对此表示歉意，但是，这是我的 fiddle :https://jsfiddle.net/99sc49a3/1/

这是我的 html，因为堆栈不允许我在没有代码的情况下发布:

<header>

  <script src="https://code.jquery.com/jquery-1.11.3.min.js" integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g=" crossorigin="anonymous"></script>
  <script src="SlickNav-master/dist/jquery.slicknav.js"></script>

  <script>
    $(function() {
      $('#menu').slicknav();
    });
  </script>
  <nav>
    <div id="fix">
      <ul class="main-nav" id="menu">
        <li>
          <a href="portfolio.html" class="logo"><img id="logo" src="logo.svg" alt="logo"></a>
        </li>
        <li><a href="#logowheader">Home</a></li>
        <li><a href="#recent">Skills</a></li>
        <div class="dropdown">
          <button class="dropbtn">
        <li><a href="#description">About</a></li></button>
          <div class="dropdown-content">
            <a href="#">Work</a>
            <a href="education2.html">Education</a>

          </div>

        </div>
        <li><a href="#iwant">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

Answer 1

这是什么原因造成的

@media (max-width: 400px) {
  #menu {
    display: none;   /* this line, right here */
    z-index: 1000;
  }
}

仔细查看您的 fiddle ，您似乎正在为菜单使用 slicknav.js，问题是您在加载之前调用了 .slicknav()它。请参阅updated fiddle有一个工作示例。当 slicknav 已经加载时，我将 .slicknav() 调用放在 window.load 事件上。

这是我的做法:

(function(){
    $(window).on('load', function(){
        $('#menu').slicknav();
    })
})(jQuery);