이렇게하면 toggle클래스 적용이 안되나요?

<header>
  <button class="menu_btn">메뉴열기</button>
</header>
<nav class="menu">
  <ul>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
  </ul>
</nav>

<style>
.menu{
  display:none;
}
.menu_on{
  display:block;
}
</style>

<script>
  $(document).ready(function(){
    $(".menu_btn").click(function(){
      $(this).toggleClass(".menu_on");
    });
  });
</script>

햄버거버튼 구현하려하는데 header에 있는 버튼에 toggle클래스 적용했더니  nav가 display block을 못받아먹네요... 어떻게 구현해야하는지 조언받을수 있을까요ㅠㅠ