jQuery "offcanvas"スライドインメニューを呼び出す機能が動作しません

Question

私の問題を解決せずにインターネットを試して検索しました。私はtransform：translate（-100％）を使ってメイン画面からスライドインメニューとして配置するように変更したリストを作成しました。メインのNavbarがモバイルボタンに崩壊すると、私はオフキャンバスメニューをスライドインするためにボタンにjQuery関数を割り当てるつもりです。しかし、ボタンは何があっても反応せず、何か援助が必要です。どんな助けでも大歓迎です！

/..The main navbar../ 
    <nav class="main-navigation" role="navigation"> 
     <ul> 
      <li class="products1"><a href="#2">Products</a></li> 
      <li class="store1"><a href="#3">Store</a></li> 
      <li class="about1"><a href="#4">About Us</a></li> 
      <li class="discover1"><a href="#5">Discover</a></li> 
      <li class="support1"><a href="#6">Support</a></li> 
     </ul> 
    </nav> 

    <div class="navbar navbar-default navbar-static-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       /..The button that dosen't work../ 
       <button class="navbar-toggle pro-toggle pull-left"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       /..The menu that I want to slide in but dosen't work../ 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <li class="products"><a href="#2">Products</a></li> 
         <li class="store"><a href="#3">Store</a></li> 
         <li class="about"><a href="#4">About Us</a></li> 
         <li class="discover"><a href="#5">Discover</a></li> 
         <li class="support"><a href="#6">Support</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 

/..The main CSS for the slide-in menu../ 

<style> 
.main-navigation { 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    position: fixed; 
    text-align: center; 
    text-decoration: none; 
    background-color: white; 
    transform: translateX(-100%); 
    transition: transform 1s ease; 
} 

.main-navigation.open { 
    transform: translateX(0); 
} 
</style> 

/..The jQuery function that is supposed to slide-in the menu../ 

<script> 
    $(document).ready(function() { 
     $('.pro-toggle').on('click', function(){ 
      ${'.main-navigation').toggleClass('open'); 
     }); 
    }); 
</script> 

Answer 1

${'.main-navigation')から$('.main-navigation')への変更

。