响应式导航切换菜单问题

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 div中删除onclick function。

3. 将整个 jquery 代码替换为

   $(document).ready(function () { $("div.container_nav").click(function () { $("div.container_nav").toggleClass("change"); $("ul.nav") .toggleClass("切换菜单"); }); });

4. 您正在将.change时间添加到container_nav ，这不会切换菜单，因为.nav没有任何变化，因此将您的.container_nav.change class 重命名为.nav.toggle-menu 。

如果您再次遇到问题，评论部分将始终打开。