響應式導航欄的問題

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'; 
      }