1

我正在整理一个移动网站，并添加了一个导航部分，当单击标题中的列表图标时应该切换进出。出于测试目的，我现在显示它，但无论它是否显示，切换功能都不起作用。这是页面：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>

这是应该切换进出的 div 的 html：

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

我已经单独测试过它并且它工作正常，但在这个页面上它没有。我需要另一双眼睛来帮助识别问题，以便我可以解决它。

谢谢！

4

1 回答 1

6

将您的事件绑定放在 document.ready 下。很有可能您的事件绑定在文档加载之前或元素存在之前被执行

$(function(){
   $("a#toggle").click(function () {
    $("#quick-nav").toggle("slow");
  });
});
于 2013-06-21T17:51:09.027 回答