Question

我有一些问题需要整周进行故障排除。我在支架IDE和Codepen上进行了尝试，但是我无法使基础框架正常工作，因为它应该像那里的网站一样

例如this应该像下面的链接一样工作：https://foundation.zurb.com/building-blocks/blocks/off-canvas-full-screen.html

<div id="offcanvas-full-screen" class="offcanvas-full-screen" data-off-canvas data-transition="overlap">
  <div class="offcanvas-full-screen-inner">
    <button class="offcanvas-full-screen-close" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>
    <ul class="offcanvas-full-screen-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact us</a></li>
    </ul>
  </div>
</div>
<div class="off-canvas-content" data-off-canvas-content>
  <div class="top-bar">
    <div class="top-bar-title">
      <strong>Site Title</strong>
    </div>
    <div class="top-bar-right">
      <button class="menu-icon dark" type="button" data-toggle="offcanvas-full-screen"></button>
    </div>
  </div>
</div>

Answer 1

您忘记初始化基础。

只需添加

<script>  
    $(document).foundation();
</script>

它将起作用。

基础javascript不能按预期工作

1 个答案: