为什么导航汉堡图标没有出现在移动设备上?

Question

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

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

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

链接到我的代码笔：

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在具有display: none的#menulist中。将其移出即可看到

Answer 3

我只是#mobile-menu移动到.menulistdiv之外。

它没有出现背后的原因是.menu-list已经显示无和汉堡图标在.menu-list内为什么没有出现。

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