Question

我按照documentation进行了画布外的使用，但根本没有用。当我试图在theri论坛上创建帖子时，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>

只有＆＃34;欢迎＆＃39;显示，没有离开画布。我在这做错了什么？谢谢。

Answer 1

你确定那里什么都没有？

看起来你只是缺少一个点击处理程序来打开你的画布内容 - 按照文档。

尝试并添加：

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

中的

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

基础6.4.3画布外容器

1 个答案: