Question

我试图让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>

Answer 1

off-canvas无法正常工作的原因是因为你没有初始化Foundation JS。

在.ready()的jQuery <script>或index.html元素中，您需要根据installation documentation example

致电$(document).foundation();

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

OR：

<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演示针对特定元素。

希望这有帮助！

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

希望这有帮助！

基金会6的画布不起作用

2 个答案: