無法切換響應式導航欄的列表項

Question

我無法切換列表視圖。我究竟做錯了什麼？

HTML：

<nav> 
    <span class="nav-btn"></span> 
    <ul class="nav"> 
     <li>home</li> 
     <li>about</li> 
     <li>blog</li> 
     <li>contact</li> 
    </ul> 
</nav> 

CSS：

@media (max-width: 480px) { 


    li { 
     display: block; 
     width: 480px; 
     text-align: left; 
     border: 1px solid black; 
    } 

    ul .nav{ 
     display: none; 
    } 
    .nav-btn:before { 
     content: "Menu"; 
    } 

    .nav-btn { 
     display: block; 
     background-color: yellow; 
     font-size: 30px; 
     text-align: center; 
     cursor: pointer; 
    } 

腳本：

$(function() { 
    "use strict"; 
    $('.nav-btn').on('click', 
     function() { 
      $('.nav').toggleClass('open'); 
     }); 
}); 

是否有可能只用JavaScript的幫助下做到這一點？

Answer 1

您正在添加「打開」類。但是沒有CSS。

在下面style即試試這個在CSS

.nav.open { 
    display: block; 
} 

Answer 2

首先改變spacing不要他們之間加空格，

ul.nav { 
    display: none; 
    } 

二使用肘和有no styling申報open類，以便增加這和它的工作。

$(function() { 
 
    "use strict"; 
 
    $('.nav-btn').on('click', function() { 
 
    $('.nav').toggle('open'); 
 
    }); 
 
});

@media screen and (max-width: 640px){ 
 
    li { 
 
    display: block; 
 
    width: 480px; 
 
    text-align: left; 
 
    border: 1px solid black; 
 
    } 
 
    ul.nav { 
 
    display: none; 
 
    } 
 
    .nav-btn:before { 
 
    content: "Menu"; 
 
    } 
 
    .nav-btn { 
 
    display: block; 
 
    background-color: yellow; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    } 
 
.open{ 
 
\t display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <span class="nav-btn"></span> 
 
    <ul class="nav"> 
 

 
    <li>home</li> 
 

 
    <li>about</li> 
 

 
    <li>blog</li> 
 

 
    <li>contact</li> 
 
    </ul> 
 
</nav>