jQueryの（HTML、CSS、jQueryの）

Question

を発射ないリスナーをクリックして、私は、HTMLの頭の中でこのスクリプトを持っている：

ときに起動する必要があり

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
    $(function() { 
     $('.nav-toggle').on('click',function(){ 
      $('.mainnav').toggleClass('open'); 
     }); 
    }); 
</script> 

：この画像をクリックする

<header> 
    <img class="nav-toggle" src="static/images/menunav.png" style="cursor: pointer;"> 
</header> 

。

とオープンサブクラスを切り替える：

<ul class="text mainnav"> 
     <li>Home</li> 
     <li>Projects</li> 
     <li>Techniques</li> 
     <li>About me</li> 
    </ul> 

しかし、それは.openクラスを発射文句を言いませんか？私はここで間違って何をしているのですか（初めてのjqueryユーザー）。

CSS：

.nav-toggle { 
    float: right; 
    margin-right: 70px; 
} 

    .mainnav{ 
     position: fixed; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     background: #222; 
     text-align: center; 
     list-style: none; 
     display: inline-block; 
     transform: translateX(-100%); 
     transition: transform 0.6s ease; 
    } 

    .mainnav.open { 
     transform: translateX(50%); 
} 

Answer 1

私は問題はHTMLであると思います。 うまく動作するようです

<script src="[JQuery CDN]"></script> 
<script> 
$(function(){ ... }); 
</script>