我想在点击时切换.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();
});
});
答案 0 :(得分:2)
我看到你忘了添加jQuery引用。添加它,它将开始工作 -
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>