Foundation 6 Off-canvas 无法从 bower 包触发

Question

我刚刚开始从 Bower 'foundation-sites' 包测试 Foundation 6，虽然我测试过的大多数 Foundation 模块似乎都可以工作，但我仍然无法触发 off-canvas 菜单。

我试过将 jquery.js 换成 jquery.min.js，尝试用 cnd 链接替换 bower 包但没有效果，我已经在网上复制粘贴了大量代码示例，但我还没有有这个工作。

这些是加载的脚本

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="bower_components/foundation-sites/js/foundation.offcanvas.js"></script>
<script src="bower_components/foundation-sites/js/foundation.core.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.mediaQuery.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.triggers.js"></script>
<script src="bower_components/foundation-sites/js/foundation.util.motion.js"></script>

这是从基础站点复制的 HTML。

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

    <!-- Close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>

    <!-- Menu -->
    <ul class="vertical menu">
      <li><a href="#">Foundation</a></li>
      <li><a href="#">Dot</a></li>
      <li><a href="#">ZURB</a></li>
      <li><a href="#">Com</a></li>
      <li><a href="#">Slash</a></li>
      <li><a href="#">Sites</a></li>
    </ul>

  </div>

  <div class="off-canvas-content" data-off-canvas-content>
    <!-- Page content -->
  </div>
</div>

然后包括切换按钮

<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>

然后我在控制台中运行 $(document).foundation() 但按钮仍然没有响应。如果它有任何重要性，我正在运行使用 Angular 路由和 pm2 服务器在 Ubuntu 16.04 上设置一个自定义 MEAN 堆栈，尽管我也尝试过在一个普通的 html 文件中在 codepen 上，两者都无法正常工作。我已经尝试删除 foundation.offcanvas.js/foundation.core.js 和 util 脚本，但仍然无法正常工作。这是仅加载 jquery 和 foundation.min.js 的代码笔 - http://codepen.io/rawiki/pen/eZboXB.

我错过了什么？我是否需要在 JavaScript 中创建一个 foundation.OffCanvas 实例才能工作？

Answer 1

页面内容区域似乎没有任何内容，因此将 offcanvas 的高度设置为 0，设置页面内容区域的高度或向其中添加一些内容将解决此问题。

这是代码笔，我只是添加了高度

.off-canvas-content{
  height:300px;
}

Foundation 6 Off-canvas 无法从 bower 包触发

Foundation 6 Off-canvas fails to trigger from bower package

zurb-foundation