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

Question

我一直在摆弄我的导航菜单，但没有运气。我不确定为什么并且会感激任何和所有的见解。我不认为脚本有问题，但我不知道为什么屏幕较小时它不显示汉堡包图标。我觉得我现在已经尝试了一切，这真的开始让我很头疼。应该是这么简单，但它拒绝工作。

菜单很简单，应该在较小的屏幕上显示汉堡图标，当你点击它时，完整的导航菜单会向下滑动。

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

我的 CODEPEN 链接：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();
    });
});

Answer 1

在您的结构中，汉堡包是具有菜单列表类的 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>

Answer 2

在您的 Codepen 中，#mobile-menu 位于 #menulist 内部，其中包含 display: none。移出来可见

Answer 3

我只是将#mobile-menu 移到.menulist div 之外。

它没有出现的原因是.menu-list已经在.menu-list里面显示了none和hamburger-icon，为什么没有出现。

$("#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; }
    .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>