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现在都正确加载。：）

基础6菜单响应切换不起作用

1 个答案: