基金會6關帆布未能從亭子包

Question

我剛開始從鮑爾「基金會的網站」包裝測試基金會6雖然大部分我測試過該基金會模塊似乎工作觸發我仍然無法觸發畫布外菜單。

我試過爲jquery.min.js換掉jquery.js，試着用cnd鏈接替換掉bower包，沒有任何效果，並且我複製了大量的網絡代碼示例，但是我還沒有這個工作。

這些是加載

<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bower_components/what-input/what-input.js"></script> 
<script src="bower_components/foundation-sites/dist/foundation.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.offcanvas.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.core.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.util.mediaQuery.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.util.triggers.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.util.motion.js"></script> 

腳本這是從基礎站點複製HTML。

<div class="off-canvas-wrapper"> 
<div class="off-canvas-wrapper-inner" data-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> 
    <!-- Page content --> 
    </div> 
</div> 

然後包括切換按鈕

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

我然後運行的$（document）.foundation（）在控制檯中，但按鈕仍然沒有反應。如果它非常重要，我在Ubuntu 16.04上運行帶有Angular路由和pm2服務器的定製MEAN堆棧，儘管我也嘗試了一個純HTML文件和codepen，並且無法讓它們工作。我試過刪除了foundation.offcanvas.js/foundation.core.js和util腳本，但仍然無法工作。這裏是只有jquery和foundation.min.js加載的codepen - http://codepen.io/rawiki/pen/eZboXB。

我錯過了什麼？在這之前，我需要在JavaScript中創建一個foundation.OffCanvas實例嗎？

Answer 1

它看起來像有什麼網頁內容中的區域因此被offcanvas'高度設置爲0，設置頁面內容區域的高度或增加一些內容，這將解決這個問題。

這裏是codepen，我剛添加的高度

.off-canvas-content{ 
    height:300px; 
}