Foundation 6菜单响应式切换不工作

我正在使用Foundation 6构建网站。出于某种原因，我的移动菜单无法正常工作。该菜单在加载页面时可见，并且切换功能不起作用。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

来源

2017-02-12 user5176291

我想通了，我的问题。 app.js基础初始化不正确。

在原来的包，我下载了：

$(document).foundation();

我不得不将其更改为：

$(document).ready(function(){ 

    $(document).foundation(); 

});

我所有的JavaScript是正确加载了。 :)

来源

2017-02-14 22:53:53 user5176291

帮我解决了我的问题！ –

Foundation 6菜单响应式切换不工作

回答

相关问题