Фонд 6 Меню Отзывчивое переключение Не работает

Question

Я строю веб-сайт с использованием Foundation 6. По какой-то причине мое мобильное меню не работает. Меню отображается при загрузке страницы, и переключатель не работает.

Моя первая догадка в том, что javascript неправильно загружен. app.js загружается в голову. Похоже, что некоторые другие JS работают на всех сайтах. В консоли нет ошибок.

Я в тупике.

Любые и все прозрения были бы весьма благодарны.

Заранее благодарен!

Вот являются ссылки на одной из страниц страниц:

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

Вот HTML ДЛЯ МОБИЛЬНОГО МЕНЮ:

<!--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--> 

вот SCSS ДЛЯ МОБИЛЬНОГО МЕНЮ:

#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; 
     } 
    } 
} 

ЗДЕСЬ скриншота, ЧТО APP.JS ЭТО ВЕДЬ В ГОЛОВЕ: enter image description here

Answer 1

Я понял мою проблему. Инициализация элемента app.js была неправильной.

В оригинальной упаковке я скачал был:

$(document).foundation(); 

мне пришлось изменить его на:

$(document).ready(function(){ 

    $(document).foundation(); 

}); 

Все мои Javascript правильно загружаются в настоящее время. :)