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

【问题标题】：Foundation 6 Off-canvas fails to trigger from bower packageFoundation 6 Off-canvas 无法从 bower 包触发
【发布时间】：2016-05-06 10:17:20
【问题描述】：

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

我尝试将 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() 但按钮仍然没有响应。如果这很重要，我会在 Ubuntu 16.04 上运行带有 Angular 路由和 pm2 服务器的自定义 MEAN 堆栈，尽管我也尝试过使用纯 html 文件和 codepen 并且两者都无法工作。我已经尝试删除 Foundation.offcanvas.js/foundation.core.js 和 util 脚本，但仍然无法正常工作。这是只加载了 jquery 和foundation.min.js 的codepen - http://codepen.io/rawiki/pen/eZboXB。

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

【问题讨论】：

标签： zurb-foundation

【解决方案1】：

页面内容区域好像什么都没有，因此将offcanvas的高度设置为0，设置页面内容区域的高度或添加一些内容将解决问题。

这里是codepen，我刚刚添加了高度

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

【讨论】：