Question

目前我正在试图找出为什么当我将浏览器置于移动视图中时，我的移动导航系统就会消失。我似乎无法确定导致问题的原因，但是当我的导航处于移动视图中时，每次我使浏览器变小时都会消失。如果有人能帮我解决这个问题，我将不胜感激！谢谢！

我不得不将我的代码放在JsFiddle中，因为它有点太长了。不过，对此抱歉，这是我的小提琴：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;
  }
}

在仔细查看您的小提琴后，您的菜单显示正在使用slicknav.js，问题是您在加载前调用.slicknav()。请参阅updated fiddle，并附上一个工作示例。当已经加载了slicknav时，我在.slicknav()事件上放置了window.load调用。

我是这样做的：

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

美孚导航消失了

1 个答案: