使用Div的JQuery Toggle导航栏

Question

所以我试图使用JQuery使我的导航栏切换,但是当我点击span按钮时,什么也没发生.

HTML

       <div id="navbar">
        <span class="navbar-btn"></span>
        <ul>
            <li class="currentpage"><a href="/Unit20/Photographer/">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </div>

JQuery的

    <script>
        $('span.navbar-btn').click(function() {
            $('#navbar').toggle();
        });
    </script>

可以在http://joshscottonthe.net/Unit20/Photographer找到实时版本- 只需重新缩放您的浏览器,小于960像素,您应该看到按钮

Answer 1

您需要在加载文档后包含脚本.

$(function() {
  $('span.navbar-btn').click(function() {
    $('#navbar').toggle();
  });
})

或者你可以像你一样包含它,只需确保<script>标签放在那之后<span class='navbar-button'>.