响应式导航栏的问题

Question

我一直在尝试构建响应式导航栏。我正在使用包含<img>和<ul>元素的<nav>元素。我设置了媒体查询，以便在屏幕调整大小时，某些<li>元素被display: none属性隐藏。当我点击菜单图标时发生问题。它应该显示隐藏的菜单项，但它没有。 有人请看看fiddle并告诉我我做错了什么？ 在此先感谢。

更新：
对不起，我还在学习绳索。如果我做了不正确的事情，而不是立即降低我的表现，你能否给我说明一下？谢谢。
这里是我的代码：

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 

但因为你的函数给出了“回应”类的ul元素的“导航”类，你需要摆脱空间的声明，它是ul元素与两个“导航“和”响应“类：

ul.nav.responsive li 

Answer 2

对于初学者来说你有你的HTML中的一个额外的结束标记。我会添加一个事件监听器来定位您的徽标点击，然后添加函数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'; 
      }