基礎畫布菜單+全頁js衝突

Question

我正在使用基礎+ fullpage js。

漢堡菜單在那裏，但是當我點擊它時，沒有任何反應。

<div class="hide-for-large-only "> 
    <div class="off-canvas-wrap" data-offcanvas> 
     <div class="inner-wrap"> 
      <nav class="tab-bar"> 
       <section class="left-small"> 
       <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a> 
       </section> 

       <section class="middle tab-bar-section"> 
       <h1 class="title">company name</h1> 
       </section> 

      </nav> 

      <aside class="left-off-canvas-menu"> 
       <ul class="off-canvas-list"> 
       <li><label>Menus</label></li> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">about</a></li> 
       <li><a href="#">products</a></li> 
       <li><a href="#">Contact Us</a></li> 
       </ul> 
      </aside> 

      <section class="main-section"> 
       <!-- content goes here --> 
      </section> 

      <a class="exit-off-canvas"></a> 

     </div> 
    </div> 
</div> 

我還有另一個導航欄，它只能在大屏幕上顯示，並在中等和下面隱藏。

<header> 
     <nav id="menu" class="hide-for-medium-down"> 
      <a data-menuanchor="home" href="#home"><img class="logo" alt="" src="img/logo1.png"></a> 
       <ul class="menutext"> 
        <li data-menuanchor="home"><a href="#home">Home</a></li> 
        <li data-menuanchor="about"><a href="#about">about</a></li> 
        <li data-menuanchor="products"><a href="#prodcuts">products</a></li> 
        <li data-menuanchor="contactus"><a href="#contactus">Contact</a></li> 
       </ul> 
     </nav> 
    </header> 

我該如何解決這個問題？

Answer 1

我以前有過同樣的問題。我沒有足夠的知識知道爲什麼會發生。但我發現我的修復是在頁面底部初始化基礎。例如：

<script> 
$(document).ready(function(){ 
    $(document).foundation(); 
}); 
</script> 

不知道這是否正確，但它對我有用。不要認爲有足夠的信息可以在不刺激的情況下完全回答問題。