javascript - JQuery Toggle Navigation Bar Using Div - Stack Overflow

admin管理员组

文章数量:1351114

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 - Just rescale your browser less than 960 pixels and you should see the button

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/Unit20/Photographer - Just rescale your browser less than 960 pixels and you should see the button

• javascript
• jquery
• html
• css
• responsive-design

Share Improve this question Follow asked Nov 11, 2015 at 22:39 Josh WalshawJosh Walshaw 21011 gold badge33 silver badges1818 bronze badges 1

• 1 Make sure the script is executed after the DOM is loaded. For example using $(document).ready() – Martin van Driel Commented Nov 11, 2015 at 22:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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'>.

I think this should solve the problem:

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

本文标签： javascriptJQuery Toggle Navigation Bar Using DivStack Overflow