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。就像故障排除步骤一样，我可能会尝试删除<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，它会正常工作。

于 2013-07-08T17:07:41.570 回答