応答メニューの切り替えは不可視になります

Question

トグルとイベント機能で、応答メニューを切り替えたいと思っていました。メニューはページの一番下に隠れて表示されます。

<div class="header"> 
    <span class="navButton"></span> 
    <ul class="nav"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="journey.html">The Journey</a></li> 
     <li><a href="getintouch.html">Get In Touch</a></li> 
    </ul> 
</div> 

CSS

.nav { 
     position: relative; 
     text-align: center; 
     width: 100%; 
     background-color: black; 
    } 
    .nav>li { 
     display: none;   
    }   
    .navButton{ 
     display: block; 
     background-color: black; 
     color: white; 
     font-size: 40px; 
     text-align: center; 
     cursor: pointer; 
    } 
    .navButton:before { 
     content: "Menu"; 
    } 

はJavaScript

$(document).ready(function() {  
    $(".navButton").click(function() {   
     $(".nav").slideToggle();   
    }); 
}); 

Answer 1

あなたの現在のコードでは、あなたがulのdisplayを切り替えるときに、そう、すべてのあなたのliのを隠していますliはまだ隠されています。 liのdisplay:none;を削除し、代わりにulに追加してください。

$(document).ready(function() {  
 
    $(".navButton").click(function() {   
 
     $(".nav").slideToggle();   
 
    }); 
 
});

.nav { 
 
    position: relative; 
 
    text-align: center; 
 
    width: 100%; 
 
    background-color: black; 
 
    display:none; 
 
} 
 
.navButton{ 
 
    display: block; 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.navButton:before { 
 
    content: "Menu"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
    <span class="navButton"></span> 
 
    <ul class="nav"> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="journey.html">The Journey</a></li> 
 
     <li><a href="getintouch.html">Get In Touch</a></li> 
 
    </ul> 
 
</div>

Answer 2

スクリプトタグをリンクされていることを確認します。 ちょうどこの

.nav { 
    position: relative; 
    text-align: center; 
    width: 100%; 
    background-color: black; 
} 
.nav>li { 
    display: none;   
} 

での変更

.nav { 
position: relative; 
display:none; 
background-color: #000; 
text-align: center; 
width:100%; 

}