Foundation 6 的 Off-canvas 不工作

Question

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

当我点击打开 canvas 的按钮时，没有任何反应。不滑动，不褪色，什么都没有。

我已检查 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>

Answer 1

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

在您的 index.html 的 jQuery .ready() 或 <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() 的基本 off-canvas 示例以及使用 ready().

工作的功能

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

在加载所有脚本后调用 $(document).foundation()，您应该能够获得 off-canvas 和任何其他功能，并且运行.

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

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

jsfiddle 演示针对特定元素。

希望对您有所帮助！

Answer 2

所以，几周来我一直在尝试实现关闭 canvas 导航。我终于想出了一个解决方案。

事实证明，none 提供的 js 文件触发了关闭 canvas 菜单，所以我决定在他们的文档站点上使用 Foundation 的 JS 文件（因为他们关闭 canvas 非常适合他们）。

这是我使用的三个脚本：

<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>

希望对您有所帮助！

Foundation 6 的 Off-canvas 不工作

Foundation 6's Off-canvas not working

zurb-foundation

off-canvas-menu