响应导航切换菜单问题

Question

我一直在我的投资组合网站上工作，似乎无法使我的响应导航正常工作。

正常导航工作正常，但响应导航切换菜单在移动版上出现问题。单击切换时，它会从菜单图标更改为X图标，但不会显示下拉导航菜单。

我一直在努力解决这个问题，但似乎找不到解决方案。任何反馈都将不胜感激，HTML，CSS&下面的JavaScript。

$(window).load(function() {
$('span.nav-btn').click(function() {
$('ul.nav').toggle();
})
$(window).resize(function() {
if ($(window).width() > 660) {
$('ul.nav').removeAttr('style')
}
})
});

function myFunction(x) {
x.classList.toggle("change");
}

nav {
letter-spacing: 1.9px;
float: right;
padding: 10px;
margin: 60px 150px 0px 0px;
}
.nav>li {
display: inline-block;
}
.nav>li>a {
color: #000;
font-size: 12px;
padding: 18px;
transition: all 0.5s ease;
text-transform: uppercase;
}
.nav>li>a:hover {
color: #c3dbc5;
}
.nav .current {
font-weight: bolder;
}
@media screen and (max-width: 900px) {
nav {
margin: 0px;
padding: 0px;
}
.nav {
display: none;
}
ul {
padding: 0px;
}
.nav>li {
margin-top: 50px;
padding: 15px 0px 0px 15px;
width: 100%;
list-style: none !important;
text-align: center;
}
.nav>li>a {
font-size: 16px;
}
.container_nav {
display: block;
cursor: pointer;
position: relative;
padding: 50px;
margin-top: 0px;
}
.container_nav.change {
display: block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
}

<nav role="navigation" id="nav">
<ul class="nav">
<li><a href="index.htm" title="Work">Work</a></li>
<li><a href="aboutme.htm" class="current" title="About">About</a></li>
<li><a href="files/resume.pdf" target="_blank" title="Resume">Resume</a></li>
<li><a href="contact.htm" title="Contact">Contact</a></li>
</ul>
<div class="container_nav" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<span class="nav-btn"></span>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您需要更改代码中的一些内容才能完成任务。

1. 将导航汉堡图标从导航容器中取出。

2. 评论说，没错，从container_nav分区删除onclick函数

3. 用替换整个jquery代码

   $(文档(.ready(函数(({$("div.container_nav"(.click(function(({$("div.container_nav"(.thoggleClass("change"(；$("ul.nav"(.thoggleClass("togglemenu"(；})；})；

4. 您同时将.change添加到container_nav，这不会切换菜单，因为.nav没有任何更改，所以将.container_nav.change类重命名为.nav.toggle-menu。

如果您再次陷入困境，评论部分始终处于打开状态。