Foundation 6.4.3 画布外容器答案

【问题标题】：Foundation 6.4.3 off-canvas containerFoundation 6.4.3 画布外容器
【发布时间】：2018-01-09 09:11:09
【问题描述】：

我按照documentation 进行画布外使用，但它根本不起作用。 F6 论坛返回403，当我尝试在论坛发帖时:(。

这是我尝试的 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>Foundation Starter Template</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="app.css"/>

  </head>
  <body>

    <div class="off-canvas-wrapper">
      <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>
        <!-- Your page content lives here -->
        Welcome !
      </div>
    </div>

    <!-- Compressed JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

只有“欢迎”显示，没有画布外。我在这里做错了什么？谢谢。

【问题讨论】：

标签： zurb-foundation zurb-foundation-6 off-canvas-menu

【解决方案1】：

你确定那里什么都没有吗？

您似乎只是缺少一个点击处理程序来打开您的画布外内容 - 根据文档。

尝试添加：

<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>

在你的

<div class="off-canvas-content" data-off-canvas-content>

【讨论】：

是的，添加按钮后它起作用了。但是 1 -> 关闭按钮是做什么用的（它也不起作用，只是显示），2 -> 我相信画布将始终显示并且可以通过菜单按钮折叠或打开。
不，默认情况下，关闭的画布不会显示（它将被隐藏关闭您的主画布）。您可以将刚刚添加的按钮更改为具有菜单图标，以便用户单击它来打开菜单。如果您希望它默认打开，您将需要使用脚本 $('#element').foundation('open', event, trigger);这样做。至于关闭按钮不起作用，我不完全确定，文档建议这应该可以关闭它，但是在您的画布上 on 的任意位置单击/点击应该会自动关闭关闭的画布内容。