Foundation 6的外部画布不工作

我正在尝试让Foundation 6的外部画布功能工作。在这一点上，我现在试图让Zurb自己的例子脱离他们的文档（http://foundation.zurb.com/sites/docs/off-canvas.html#complete-example）来工作。Foundation 6的外部画布不工作

当我点击按钮打开画布时，没有任何反应。没有滑动，不褪色，没有。

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

来源

2017-02-09 MadEmperorYuri

分享您的HTML，即使它是文档 –

@AlexanderStaroselsky完成的示例。添加了HTML。 – MadEmperorYuri

看到我的答案。谢谢！ –

为什么关闭画布不工作的原因是因为你没有初始化基金会JS。

在任何一个jQuery .ready()或之后的<script>元素你index.html需要调用$(document).foundation();每installation documentation example

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

希望有帮助！

来源

2017-02-09 04:59:16

就是这样。谢谢！我不会想到要查看安装文档。 – MadEmperorYuri

-1

所以，我一直在尝试实施几个星期的关闭画布导航。我终于想出了一个解决方案。

原来，没有被提供的js文件的触发关闭帆布菜单，所以我决定用自己的文档站点基金会的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-21 19:55:15

Foundation 6的外部画布不工作

回答

相关问题