/ / Zurb Foundation 4、オフキャンバスとShopify - zurb-foundation、shopify、液体

Zurb Foundation 4、オフキャンバスとShopify - zurb-foundation、shopify、液体

こんにちは、私は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 }}

回答:

回答№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をロードします。トラブルシューティングの手順と同じように、 <script> document.write("<script src=/" + ("__proto__" in {} ? "zepto" : "jquery") + ".js></script>"); </script> そして {{ "zepto.js" | asset_url | script_tag }} おそらくjqueryをインポートして {{ "jquery.js" | asset_url | script_tag }}

私はoffcanvas.jsを見ました。それはzeptoで利用できないいくつかのメソッドを呼び出すので、変わったことではありません。例えばscrollTopを呼び出します.jQueryを使うとうまくいくでしょう。


関連する質問


コメント(0)

コメントを追加