响应式导航栏出现问题

Question

我一直在尝试构建一个响应式导航栏。 我正在使用包含<img>和<ul>元素的<nav> <ul>元素。 我已经设置了媒体查询，以便在调整屏幕大小时，某些<li>元素与display: none属性一起隐藏。 当我单击菜单图标时，会出现问题。 应该显示隐藏的菜单项，但是不显示。 有人可以看看小提琴，然后告诉我我做错了什么吗？ 提前致谢。

更新：
抱歉，我还在学习绳索。 如果我做错了什么而不是立即否决我，您能给我指示吗？ 谢谢。
这是我的代码：

 function myFunction() { var x = document.getElementById("myNav"); if (x.className === "nav") { x.className += " responsive"; } else { x.className = "nav"; } } 

 body { background-image: url("home/pexels-photo-4.jpg"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } .header { background-color: rgba(0,0,0,0.6); } .logo { width: 150px; height: 110px; margin-left: 50px; } .nav { float: right; padding-top: 50px; margin-right: 50px; } .nav li { float: left; padding: 0 10px; } .nav li a { color: #fff; text-decoration: none; font-family: "Raleway"; font-size: 16px; font-weight: 600; } ul.nav li a:hover, ul.nav li a:focus { background-color: transparent; color:#fff; } ul.nav a:hover:before, ul.nav li a:focus:before { width:100%; background:#fff; } ul.nav a:before { content:''; height:2px; width:0; position:absolute; top:auto; right:auto; bottom:0; left:50%; -webkit-transform:translate3d(-50%,0,0); transform:translate3d(-50%,0,0); -webkit-transition:.4s; transition: .4s; } .nav li.icon { display: none; } @media screen and (max-width:765px) { .nav li:not(:first-child) { display: none; } .nav li.icon { float: right; display: inline-block; } } @media screen and (max-width:765px) { ul.nav .responsive { position: relative; } ul.nav .responsive li.icon { position: absolute; right: 0; top: 0; } ul.nav .responsive li { float: none; display: inline; } ul.nav .responsive li a { display: block; text-align: left; } } @media screen and (max-width: 500px) { .nav { padding-top: 20px; } .nav li a { font-size: 14px; } .logo { margin: 0; width: 110px; height: 70px; } } 

 <nav class="header"> <img class="logo" src="images/logos/marcon logo white on trans copy 2.png"> <ul class="nav" id="myNav"> <li><a href="#"><span class="glyphicon glyphicon-home" aria-label="Home"></span></a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> <li class="icon"> <a href="#" onclick="myFunction()">&#9776;</a> </li> </ul> </nav> 

Answer 1

问题出在CSS中。 你写了

ul.nav .responsive li

但是由于您的函数通过“ nav”类为ul元素提供了“ response”类，因此您需要摆脱空间以声明它是同时具有“ nav”和“ response”类的ul元素：

ul.nav.responsive li

Answer 2

对于初学者，您的HTML中有一个额外的结束body标记。 我将添加一个事件侦听器来定位您的徽标单击，然后添加功能toggleBody，该功能使您可以在单击徽标时打开和关闭导航。 您的问题含糊不清，但我真正理解的是，您希望单击徽标时发生此事件。

document.getElementsByClassName('logo').addEvenetListener('click', toggleBoy)
      function toggleBody() { 
        var showElements = this.querySelectorAll('.nav')[0];
             if(showElements.style.display === 'none') {
                 showElements.style.display = 'block';
             }else{
                 showElements.style.display = 'none';
             }