JQuery Переключить панель навигации с помощью Div

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

Answer 2

Я думаю, что это должно решить проблему:

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