Question

我刚刚开始在Bower＆＃39;基金会网站＆＃39;虽然我测试过的大多数基础模块似乎都能正常工作，但我还是无法触发画布上的菜单。

我已经尝试将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之前创建一个基础.OffCanvas实例吗？

Answer 1

看起来页面内容区域没有任何内容，因此它设置了离线扫描＆＃39;高度为0，设置页面内容区域的高度或向其添加一些内容将解决问题。

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

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

Foundation 6 Off-canvas无法从凉亭包

1 个答案: