Foundation 6 的画布外无法正常工作答案

【问题标题】：Foundation 6's Off-canvas not workingFoundation 6 的画布外无法正常工作
【发布时间】：2017-02-09 00:13:18
【问题描述】：

我正在尝试让 Foundation 6 的 Off-canvas 功能发挥作用。在这一点上，我现在正试图让 Zurb 自己的示例从他们的文档 (http://foundation.zurb.com/sites/docs/off-canvas.html#complete-example) 中工作。

当我打开画布的按钮被点击时，什么也没有发生。没有滑动，没有褪色，什么都没有。

我检查了foundation.js 是否包含在页面中。我可以看到事件处理程序已绑定到按钮。

想法？提前致谢！

HTML 源代码：

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home | LearnLojban</title>
    <link href="https://fonts.googleapis.com/css?family=Merriweather:700,700i|Pangolin|Signika&amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="static/styles/styles.css" />
  </head>
  <body>

    <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>
      <button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
    </div>

    <script src="static/js/vendor/jquery.js"></script>
    <script src="static/js/vendor/what-input.js"></script>
    <script src="static/js/vendor/foundation.js"></script>

  </body>
</html>

【问题讨论】：

分享您的 HTML，即使它是文档中的示例
@AlexanderStaroselsky，完成。添加了 HTML。
看我的回答。谢谢！

标签： zurb-foundation off-canvas-menu

【解决方案1】：

off-canvas 不工作的原因是你没有初始化 Foundation JS。

在 jQuery .ready() 或 index.html 的 <script> 元素之后，您需要根据 installation documentation example 调用 $(document).foundation();

$(document).ready(function(){
    $(document).foundation();
});

或者：

<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>

这是一个jsfiddle，其中包含基本的画布外示例，其中$(document).foundation() 被调用，功能使用ready() 工作。

这是一个 jsfiddle，但没有调用 $(document).foundation()，您会立即看到功能失败。

在所有脚本加载完毕后调用$(document).foundation()，您应该能够在画布之外启动并运行任何其他功能。

您还可以通过在该元素上调用 foundation() 来定位特定元素。

$('#foo').foundation(); // initialize all plugins within the element `#foo`

jsfiddle 演示针对特定元素。

希望对您有所帮助！

【讨论】：

就是这样。谢谢！我没想过要查看安装文档。

【解决方案2】：

所以，几周来我一直在尝试实现画布外导航。我终于想出了一个解决办法。

原来提供的所有 js 文件都没有触发关闭画布菜单，所以我决定在他们的文档站点上使用 Foundation 的 JS 文件（因为他们的关闭画布非常适合他们）。

这是我使用的三个脚本：

<script src="http://foundation.zurb.com/sites/docs/assets/js/vendor.js?hash=eceb3a0cb6a9a3f95854c532a6ebbd81"></script>

<script src="http://foundation.zurb.com/sites/docs/assets/js/foundation.js?hash=b679e2177e3de7e04f4c100d03af1ad3"></script>

<script src="http://foundation.zurb.com/sites/docs/assets/js/docs.js?hash=9adc0ae1222c4567178bb0cc7f704ec5"></script>

希望这会有所帮助！

【讨论】：