基础 javascript 未按预期工作

Question

我有一些问题整整一周都在解决。我在括号 IDE 和 codepen 上尝试过，但我无法使基础框架正常工作，因为它应该像网站上的那样

例如this should work like below link: 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

你忘了初始化foundation

只需添加

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

它会起作用。

基础 javascript 未按预期工作

foundation javascript not working as expected

html

javascript

css

jquery

zurb-foundation