使用Div的jQuery Toggle导航栏

Question

So I'm trying to make my navigation bar toggle using JQuery however when I click on the span button, nothing is happening.

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>

Live Version can be found at http://joshscottonthe.net/Unit20/Photographer - Just rescale your browser less than 960 pixels and you should see the button

Answer 1

You need to include your script after the document is loaded.

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

Or you can include it in the same way you did, just make sure that the <script> tag is placed after that <span class='navbar-button'> .

Answer 2

I think this should solve the problem:

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