Zurb Foundation 5 offcanvas 不工作答案

【问题标题】：Zurb Foundation 5 offcanvas not workingZurb Foundation 5 offcanvas 不工作
【发布时间】：2014-01-14 13:25:49
【问题描述】：

我正在尝试使用 zurb 的基础框架为网站实现一个 offcanvas，用于移动查看，并且只是从文档中复制了它的代码，但它不起作用。

代码如下：

<script src="/js/vendor/custom.modernizr.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>

<script>
    $(document).foundation();
</script>
</head>
<body>
<!--offcanvas begin-->
    <div class="off-canvas-wrap">
        <div class="inner-wrap">

            <nav class="tab-bar show-for-small">
                <a class="left-off-canvas-toggle menu-icon">
                    <span>Foundation</span>
                </a>  
            </nav>


            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Foundation</label></li>
                    <li><a href="#">The Psychohistorians</a></li>
                    <li><a href="#">The test!</a></li>
                </ul>
            </aside>

            <section class="main-section">
            <!--offcanvas begin-page-content-->

                <!--content-->

            <!--offcanvas end-page-content-->
            </section>

            <a class="exit-off-canvas"></a>

        </div><!--inner-wrap-->
    </div><!-- off-canvas-wrap -->
<!--offcanvas end-->
</body>

我做错了吗？

【问题讨论】：

标签： zurb-foundation

【解决方案1】：

在某些情况下，可以通过提供 HTML 数据属性 data-offcanvas 来解决此问题

  <div class="off-canvas-wrap" data-offcanvas>

请参阅此小提琴以了解您的标记的工作更改：http://jsfiddle.net/vooaqtxt/

【讨论】：

在尝试了所有其他答案之后，我发现这是在 5.2.2 和 5.2.3 之间产生差异的答案
这是正确答案。修复了 5.5.2 版

【解决方案2】：

我已经复现了问题，发现移动jquery、foundation.min.js资源和初始化调用：

$(document).foundation();

在关闭 </body> 标记之前修复了问题（将 modernizr.js 留在头部）。

编辑：正如@Jigar 指出的offcanvas.js 不需要从外部加载。

p.s.在几乎所有情况下，it's best to place all your script references at the end of the page，就在</body>之前

【讨论】：

offcanvas.js 包含在 foundation.min.js 中，因此不需要单独加载
Foundation 5.0.3 不再需要此功能！

【解决方案3】：

不幸的是，Ribena 的答案在 5.2.3 版本中不再有效，尽管它在 5.0.3 版本中。

要让它现在工作，需要放置触发器 javascript：

或在<body> 标签的末尾，就像它在docs 中所说的那样，就像丹尼尔所说的那样
或者在<head>里面这样（使用JQuery）：

<script> $(window).bind("load", function () { $(document).foundation(); }); </script>

【讨论】：

谢谢，解决了我的问题。 OR 可能不够强大，我试了几次才最终将代码移到文档的开头。谢谢！

【解决方案4】：

更新到 Foundation 5.0.3，您的代码应该可以再次正常工作。

【讨论】：

【解决方案5】：

您在切换按钮链接上缺少 href="#"

如果缺少 href="#"，它将无法在移动设备上使用。

你的导航应该是这样的：

<nav class="tab-bar show-for-small">
    <a class="left-off-canvas-toggle menu-icon" href="#">
        <span>Foundation</span>
    </a>
</nav>

【讨论】：