Почему не работает jQuery .toggle()?

Question

Я завершаю мобильный сайт и добавил раздел навигации, который должен включать и выключать при нажатии на значок списка в заголовке. В целях тестирования я показываю это прямо сейчас, но независимо от того, отображается оно или нет, функция переключения не работает. Вот страница: sunsetwesterngardencollection.com/mobile/ (она выглядит лучше).

Вот HTML для триггера:

<header> 
    <h1><a href="{site_url}mobile/"><img src="{site_url}/images-mobile/logo-sunset.png" alt="Sunset Western Garden Collection"></a></h1> 
    <ul> 
     <li><a id="toggle" href="#"><img src="{site_url}/images-mobile/icon_main-menu.png" alt="main menu"></a></li> 
     <li><a href="{site_url}mobile/search"><img src="{site_url}/images-mobile/icon_search.png" alt="search sunset"></a></li> 
     <li><a href="{site_url}mobile/find-retailer"><img src="{site_url}/images-mobile/icon_finder.png" alt="retail locator"></a></li> 
    </ul> 
    <div class="clearer"></div> 
</header> 

Вот HTML для DIV, который должен переключаться в и из:

<div id="quick-nav"> 
     <ul id="quick"> 
       <li><a href="{site_url}mobile/"><img src="/images-mobile/bg_quick-nav.png" alt="home" /><span>Home</span></a></li> 
       <li><a href="{site_url}mobile/the-collection"><img src="/images-mobile/bg_quick-nav.png" alt="home" /><span>The Collection</span></a></li> 
       <li><a href="{site_url}mobile/find-retailer"><img src="/images-mobile/bg_quick-nav.png" alt="home" /><span>Where to Buy</span></a></li> 
       <li><a href="{site_url}mobile/blog"><img src="/images-mobile/bg_quick-nav.png" alt="home" /><span>Our Blog</span></a></li> 
       <li><a href="http://www.facebook.com/SunsetWesternGardenCollection"><img src="/images-mobile/bg_quick-nav.png" alt="home" /><span>Follow us on Facebook</span></a></li> 
       <li><a href="https://twitter.com/#!/SunsetPlants"><img src="/images-mobile/bg_quick-nav.png" alt="home" /><span>Follow us on Twitter</span></a></li> 
       <li><a href="{site_url}index2/"><img src="/images-mobile/bg_quick-nav.png" alt="home" /><span>Go to Full Site</span></a></li> 
     </ul> 
</div><!--end #quick-nav--> 

Вот это JQuery Я использую:

<!-- Scripts --> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
$("a#toggle").click(function() { 
$("#quick-nav").toggle("slow"); 
}); 

</script> 

Я тестировал это отдельно, и он работает правильно, но на этой странице это не так. Мне нужна еще одна пара глаз, чтобы помочь определить проблему, чтобы я мог ее исправить.

Спасибо!

Answer 1

Место привязки вашего события по документу.ready. Скорее всего, ваша привязка события выполняется до того, как документ будет загружен или до того, как будет существовать элемент.

$(function(){ 
    $("a#toggle").click(function() { 
    $("#quick-nav").toggle("slow"); 
    }); 
});