菜单切换单击

时间:2016-07-18 09:52:28

标签: javascript jquery

我想在点击时切换.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();
  });

});

1 个答案:

答案 0 :(得分:2)

我看到你忘了添加jQuery引用。添加它,它将开始工作 -

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