0

我正在尝试让 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>
4

2 回答 2

3

画布外不起作用的原因是因为您没有初始化 Foundation JS。

在 jQuery.ready()或之后<script>的元素中，您index.html需要$(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演示针对特定元素。

希望这会有所帮助！

于 2017-02-09T04:59:16.333 回答
-1

所以，我已经尝试实现画布外导航几个星期了。我终于想出了一个解决办法。

事实证明，提供的所有 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>

希望这可以帮助！

于 2017-03-21T19:55:15.390 回答