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 に答える