メニュークリック時に切り替えます

Question

クリック時に.menu divを切り替えたいと思います。これは私が得たところであり、なぜJavaScriptが全く働いていないのか困惑しています。既に試してみました。

大変助かります。

http://codepen.io/su1ts/pen/bZLwZN

HTML：

<header>  
    <button class="headerButton"> 
     <ul class="hamburger"> 
      <li></li> 
      <li></li> 
      <li></li> 
    </ul> 
    </button> 
</header> 

<div class="menu">a</div> 

CSS：

header 
    :width 100% 
    :height 56px 
    :color #FFF 
    :position fixed 
    :font-size 20px 
    :z-index 9999 
    button.headerButton 
     :width 24px 
     :height 24px 
     :text-indent -30000px 
     :overflow hidden 
     :border none 
     :outline none 
     :cursor pointer 
     :position absolute 
     ul.hamburger 
      :margin-top 4px 
      :padding 0 
      li 
       :height 3px 
       :width 12px 
       :background blue 
       :list-style none 
       :margin auto 
       :margin-bottom 2px 
       :opacity 1 
       :border-radius 1px 
       :transition (.25s ease-in-out) 

.menu 
    :width 100% 
    :height 100% 
    :background-color rgba(10,10,10,0.95) 
    :color white 
    :position fixed 
    :display none 
    :z-index 14 

JS：

$(document).ready(function() { 

    $('button.headerButton').click(function() { 
    $('.menu').toggle(); 
    }); 

}); 

Answer 1

jQueryリファレンスを追加するのを忘れてしまいました。これを追加して作業を開始します -

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>