Question

我正在尝试使用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>

我做错了吗？

Answer 1

在某些情况下，可以通过提供HTML数据属性data-offcanvas

来解决此问题

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

请参阅此标题，了解标记的工作更改：http://jsfiddle.net/vooaqtxt/

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

Answer 3

不幸的是，Ribena的答案已经不再适用了，版本5.2.3，虽然版本是5.0.3。

要使它现在起作用，需要输入触发器javascript：

或<body>标记的末尾，如docs所述，与Daniel说的一样
或<head>这种方式（使用JQuery）：

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

Answer 4

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

Answer 5

你错过了href =＆＃34;＃＆＃34;在你的切换按钮链接

如果href =＆＃34;＃＆＃34;缺少，它将无法在移动设备上运行。

这就是你的导航应该是这样的：

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

Zurb Foundation 5 offcanvas无法正常工作

5 个答案:

你错过了href =＆＃34;＃＆＃34;在你的切换按钮链接

这就是你的导航应该是这样的：