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>

这是应该切换的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>

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

谢谢！

Answer 1

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

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

为什么jQuery .toggle（）不能正常工作？

1 个答案: