javascript - 点击菜单切换

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>