0

こんにちは、Zurb Foundation 4 を使用して、オフ キャンバス モバイル メニューを自分の shopify ストア内で動作させようとしています。私が抱えている問題は、メニューボタンが正常に表示されていることですが、クリックしても何もトリガーされず、プリロードされたサイドバーがデスクトップに表示されます

私がこれまでに使用したコードは

<!-- mobile only side bar -->
    <header class="row">
        <div class="large-8 columns small-2">
            <p class="show-for-small">
              <a class='sidebar-button button' id="sidebarButton" href="#sidebar" >Menu</a>
            </p>
      </div>
        <section id="sidebar" role="complementary">
            <nav id="sideMenu" role="navigation">
                <ul id="sideMainNav" class="nav-bar">
                    <li><a href="">test</a></li>
                    <li><a href="">Two</a></li>
                    <li><a href="">Three</a></li>
                    <li><a href="">Four</a></li>
                </ul>
            </nav>
        </section>
        </header>
    <!-- /mobile -->


<!-- Check for Zepto support, load jQuery if necessary -->
<script>
  document.write('<script src=/'
    + ('__proto__' in {} ? 'zepto' : 'jquery')
    + '.js><\/script>');
</script>   

{{ 'zepto.js' | asset_url | script_tag }}
{{ 'foundation.min.js' | asset_url | script_tag }}
<script>
  $(document).foundation();
</script>
{{ 'jquery.offcanvas.js' | asset_url | script_tag }}
4

1 に答える 1

3

あなたは<body class="off-canvas hide-extras">すでに持っていますか？

このコード: <script> document.write('<script src=/' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>'); </script>Zepto (jquery 互換ライブラリ) を読み込みます。zepto がサポートされていない場合 (IE)、jquery をロードします。トラブルシューティングの手順として、おそらく jquery を削除<script> document.write('<script src=/' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>'); </script>してインポートしてみます{{ 'zepto.js' | asset_url | script_tag }}{{ 'jquery.js' | asset_url | script_tag }}

offcanvas.js をのぞいてみました。zepto では利用できないいくつかのメソッドを呼び出すので、それほど奇妙ではありません。たとえば、 scrollTop を呼び出します。jQuery を使用すると、問題なく動作します。

于 2013-07-08T17:07:41.570 に答える