jQuery "offcanvas"슬라이드 인 메뉴 가져 오기 기능이 작동하지 않습니다.

Question

문제를 해결하지 않고 인터넷을 마르고 검색했습니다. 나는 transform : translate (-100 %)를 사용하여 주 화면에서 슬라이드 인 메뉴로 위치하도록 수정 한 목록을 만들었습니다. 메인 네비게이션 바가 모바일 버튼으로 접힐 때, 버튼에 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')로 변경

.