ファンデーション6メニューレスポンストグルが動作しない

Question

私はFoundation 6を使用してウェブサイトを構築しています。何らかの理由で、私のモバイルメニューが機能していません。メニューはページの読み込み時に表示され、トグルは機能しません。

私の最初の勘違いは、javascriptが正しく読み込まれていないことです。 app.jsが頭に読み込まれます。他のJSもサイト全体で働いているようです。コンソールにエラーはありません。

私は困惑しています。

すべての洞察力は大変高く評価されます。

ありがとうございます！

HERE

<!--Begin Mobile Title Bar Menu--> 
<div id="mobile-title-bar" 
    class="title-bar hide-for-medium" 
    data-responsive-toggle="mobile-menu" 
    data-hide-for="medium"> 

    <img id="mobile-logo" 
     src="../assets/img/desrosiers-architects-mobile-logo.png" 
     alt="Desrosiers Architects : Bloomfield, MI" /> 

    <h1> 
     Main Heading 
    </h1> 

    <button class="menu-icon" 
      type="button" 
      data-toggle="mobile-menu"> 
    </button> 
</div> 
<!--End Mobile Title Bar Menu--> 

<!--Begin Mobile Navigation Menu--> 
<div id="mobile-menu" 
    class="top-bar" 
    data-animate="hinge-in-from-top spin-out"> 

    <ul id="mobile-nav" 
     class="vertical menu"> 

     <li class="menu-item"> 
      <a href="residential.html">Residential</a> 
     </li> 

     <li class="menu-item"> 
      <a href="residential.html">Commercial</a> 
     </li> 

     <li class="menu-item"> 
      <a href="residential.html">New Projects</a> 
     </li> 

     <li class="menu-item"> 
      <a href="residential.html">Process</a> 
     </li> 

     <li class="menu-item"> 
      <a href="residential.html">Profile</a> 
     </li> 

     <li class="menu-item"> 
      <a href="residential.html">In The News</a> 
     </li> 

     <li class="menu-item"> 
      <a href="residential.html">About</a> 
     </li> 
    </ul> 
</div> 
<!--End Mobile Navigation Menu--> 

モバイルMENU FOR SCSS'S：

HERE http://robertrhu.net/desrosiers/single-residential.html

モバイルMENU FOR HTML'S：ここ

のは、ページのページのいずれかへのリンクは以下のとおりです。

#mobile-menu { 
    background-color: transparent; 
    display: none; 

    ul#mobile-nav { 
     background-color: transparent; 
     text-transform: uppercase; 
     font-weight: 700; 
     width: 150px; 
     padding: 2px 0 3px 20px; 

     li.menu-item { 
      padding: 7px 0; 

      a { 
       padding: 0; 
       transition: all 0.5s ease; 
      } 
     } 

     li.menu-item:nth-of-type(3){ 
      padding-bottom: 18px; 
     } 

     li.menu-item:nth-of-type(4){ 
      padding-top: 18px; 
      border-top: 1px dashed $anchor-color; 
     } 
    } 
} 

HERE

がAPP.JSが頭の中で実際にはスクリーンショット見せている： enter image description here

Answer 1

私は私の問題を考え出しました。 app.jsの基盤の初期化が正しくありませんでした。私は、ダウンロード元のパッケージに

は持っていた：すべての私のjavascriptが正しくロードされ

$(document).ready(function(){ 

    $(document).foundation(); 

}); 

：

$(document).foundation(); 

を、私はそれを変更しなければなりませんでした。 :)