jquery - 为什么导航汉堡图标不出现在手机上？

我已经摆弄了我的导航菜单一段时间了，但是没有运气。我不确定为什么会欣赏任何见解。我不认为脚本有问题，但是我不知道为什么当屏幕较小时它不显示汉堡图标。我觉得到目前为止我已经尝试了所有方法，这真的开始让我头疼。它应该是如此简单，但它拒绝工作。

菜单很简单，应该在较小的屏幕上显示汉堡图标，然后单击该菜单，整个导航菜单就会向下滑动。

导航列表确实消失了，但是没有汉堡图标，所以我不能让它重新出现在较小的屏幕上。

链接到我的密码：https://codepen.io/Pinchofginger/pen/eYmydBo

<div class="nav">
    <nav class="main-navigation">
        <a href="#"><img id="logo"src="https://www.vindrosen-huset.dk/media/zoo/images/Angstforeningen_29df0951c1c6886d2b89cb5249a05da4.png" alt="alt tekst"></a>
        <div class="menu-list">
          <a href="#">Hjem &nbsp;<i class="fas fa-home"></i></a></a>

          <div class="subnav">
            <a href="www.angstforeningen.dk/index.php?page=hvorfor-en-angstforening">Emner på siden  &nbsp; <i class="fas fa-list"></i></a></div>
           <div class="subnav">
            <a href="www.angstforeningen.dk/uploads/tryksager/pjecer/Panikangst.pdf">Folder &nbsp;<i class="fas fa-file-download"></i></a></div>

           <div class="subnav">
            <a href="tegn-paa-smerte.html">Kontakt os &nbsp;<i class="fas fa-envelope"></i>

             </a></div>

        <i id="mobile-menu" class="fas fa-bars"></i>
      </nav>

  </div></div>


    <!-- Ikon kit -->
    <script src="https://kit.fontawesome.com/52c7af8f48.js" crossorigin="anonymous"></script>

.nav {
  background-color: #144e75;
}

#logo {
  margin-top: -35%;
}

.main-navigation {
  letter-spacing: .1em; /* Rummet mellem bogstaver */
  height: 20px;
  display: flex; /* flexbox */
  justify-content: space-between; /* Distribuere delene ligeligt på pladsen */
}

.main-navigation img {
  height: 60px;
}

.main-navigation a {
  padding: 30px 10px;
  float: left;
  color: #f6933b;
  font-weight: bold;
  margin: 0 15px;
}

.main-navigation a:hover {
  color: white;
}

#mobile-menu {
  display: none;
  font-size: 25px;
  margin-right: 10px;
}

.subnav {
  float: left;
  overflow: hidden;
}

@media only screen and (max-width: 900px) {
  #mobile-menu {
    display: flex;
  }

  .main-navigation a {
    float: none;
  }

  .menu-list {
    display: none;
    position: absolute;
    left: 0;
    top: 80px;
    border-top: 5px solid #0072ce;
    border-bottom: 5px solid #0072ce;
    width: 100%;
    background-color: #fff;
  }

  .menu-list a {
    display: block;
    padding: 16px;
  }

  .subnav {
    float: none;
    display: inline;
  }
}

$("#mobile-menu").click(function() {
    $(".menu-list").slideToggle();

    $("a").click(function() {
        $(".menu-list").slideUp();
    });
});

最佳答案

在您的结构中，汉堡包是具有菜单列表类的div的子级，并且因为您隐藏了菜单列表，所以您还隐藏了所有子级

所以你需要把它展示出来

$("#mobile-menu").click(function() {
    $(".menu-list").slideToggle();

    $("a").click(function() {
        $(".menu-list").slideUp();
    });

});

.nav { background-color: #144e75;}
#logo {margin-top: -35%;}
.main-navigation {
  letter-spacing: 0.1em; /*Rummet mellem bogstaver*/
  height: 20px;
  display: flex; /*flexbox*/
  justify-content: space-between;/*Distribuere delene ligeligt på pladsen*/
 }
  .main-navigation img {
    height: 60px;
  }
  .main-navigation a {
    padding: 30px 10px;
    float: left;
   color: #f6933b;
    font-weight: bold;
    margin: 0 15px;
  }
  .main-navigation a:hover {
    color: white;  }

  #mobile-menu {
    display: none;
    font-size: 25px;
    margin-right: 10px;   }

  .subnav {
    float: left;
    overflow: hidden;   }

  @media only screen and (max-width: 900px) {
    #mobile-menu { display: flex;flex-direction:row-reverse; }
    .main-navigation a { float: none; }

    .menu-list {
      display: none;
      position: absolute;
      left: 0;
      top: 80px;
      border-top: 5px solid #0072ce;
      border-bottom: 5px solid #0072ce;
      width: 100%;
      background-color: #fff;
    }
    .menu-list a { display: block;
      padding: 16px; }

    .subnav {
      float: none;
      display: inline;
    }   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
    <nav class="main-navigation">
        <a href="#"><img id="logo"src="https://www.vindrosen-huset.dk/media/zoo/images/Angstforeningen_29df0951c1c6886d2b89cb5249a05da4.png" alt="alt tekst"></a>
        <div class="menu-list">
          <a href="#">Hjem &nbsp;<i class="fas fa-home"></i></a></a>

          <div class="subnav">
            <a href="www.angstforeningen.dk/index.php?page=hvorfor-en-angstforening">Emner på siden  &nbsp; <i class="fas fa-list"></i></a></div>
           <div class="subnav">
            <a href="www.angstforeningen.dk/uploads/tryksager/pjecer/Panikangst.pdf">Folder &nbsp;<i class="fas fa-file-download"></i></a></div>

           <div class="subnav">
            <a href="tegn-paa-smerte.html">Kontakt os &nbsp;<i class="fas fa-envelope"></i>

             </a></div>


      </nav>

  </div>
<i id="mobile-menu" class="fas fa-bars"></i>
</div>


    <!-- Ikon kit -->
    <script src="https://kit.fontawesome.com/52c7af8f48.js" crossorigin="anonymous"></script>

关于jquery - 为什么导航汉堡图标不出现在手机上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59604462/