javascript - 我的汉堡菜单在特定页面上没有响应？

Question

我使用 HTML、CSS 和 JavaScript 创建了一个汉堡包菜单。 :hover 似乎工作得很好，在某些页面上过渡动画也工作得很好；然而，我最近在几个页面上添加了一个 tile 系统(这些页面上除了全局导航之外的唯一内容)，并注意到 form 元素是检查 时的主要焦点>DOM。然后，我更改了 CSS 中几个类的 z-index，这时菜单停止响应 JavaScript。我不确定这是否是真正的原因，并且我尝试展开更改以查看具体导致问题的原因，但我似乎无法找到它。因此，我在这里；我认为那些比我知识渊博的人可能会发现我没有看到的 CSS 问题。

---

输入这个问题并输入下面的代码片段后，我似乎无法在此处重现它，我将此处的代码与我网页上的代码进行了比较，一切似乎都相同。我真的对此不知所措，在此处重现失败后，我开始认为它可能是 Edge 缓存的某些东西之间的交叉样式，但在 DOM 中进一步检查后，这并没有似乎是这样。

欢迎访问my website当前存在此问题的位置并访问下面链接的三个页面之一(最好在移动设备上，或调整浏览器大小以模拟较小的屏幕以显示菜单)。

• Games
• Software
• Apps

要与实际发生的情况进行比较，请随时访问 home页，或 about me页;或者简单地运行下面的代码片段。

---

下面的代码片段来自菜单不响应 JavaScript 的页面。

var wrapperMenu = document.querySelector('.hamburger-menu');

wrapperMenu.addEventListener('click', function () {
    wrapperMenu.classList.toggle('active');
    document.getElementById('globalnav').classList.toggle('active');
})

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

*, *::after, *::before {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    overflow-x: hidden;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding-top: 15px;
    background-color: #333;
    z-index: 3;
}

a.title {
    cursor: default;
    color: #eee !important;
    display: none;
    text-decoration: none !important;
    font-size: 25px;
    letter-spacing: 5px;
    padding-left: 25px;
    transition: 0.5s all;
}

nav a {
    text-decoration: none !important;
    cursor: pointer;
    color: #eee;
    font-size: 25px;
    letter-spacing: 5px;
    padding-left: 25px;
    transition: 1s all;
    transition: 0.5s color;
}

    nav a.active {
        color: #3cf;
    }

    nav a:hover {
        color: #3cf;
    }

.main-content {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 50px;
    z-index: 1;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 2;
}

.tiles {
    width: 100%;
    height: 100%;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    z-index: 2;
}

.tile {
    width: 200px;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, .05);
    transition: 0.1s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    will-change: all;
}

    .tile p {
        padding-bottom: 0.3em;
    }

    .tile .title, .tile .amount, .tile .icon {
        color: #333;
    }

    .tile .title {
        font-size: 16px;
    }

    .tile .amount {
        font-size: 10px;
        font-weight: 200;
        opacity: 0.7;
    }

    .tile .icon {
        font-size: 40px;
        padding-bottom: 0.3em;
    }

    .tile:hover, .tile.initial {
        transform: scale(1.05) translate3d(0, 0, 0);
        background-color: white;
        border: 1px solid transparent;
        border-radius: 3px;
        box-shadow: -13px 11px 25px 1px rgba(0, 0, 0, 0.55);
        transition: 0.3s;
    }

        .tile:hover .icon, .tile.initial .icon, .tile:hover .title, .tile.initial .title, .tile:hover .amount, .tile.initial .amount {
            color: #3cf;
            opacity: 1;
        }

@media screen and (max-width: 800px) {
    nav {
        position: fixed;
        top: 50px;
        left: 0;
        width: 100%;
        background-color: #555;
    }

        nav a {
            display: none;
        }

        nav.active a {
            display: block;
            padding-top: 5px;
            padding-bottom: 5px;
            transition: 1s all;
        }

        nav a:hover {
            box-shadow: 1920px 0px rgba(0, 0, 0, 0.25) inset;
            text-shadow: -2px 2px 15px;
        }

    a.title {
        display: block;
    }

    .hamburger-menu {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 5;
        height: 30px;
        width: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        transition: 0.75s all;
    }

        .hamburger-menu.active {
            transform: rotate(-405deg);
            transition: 0.75s all;
        }

        .hamburger-menu div {
            background-color: #eee;
            border-radius: 5px;
            height: 2px;
            transition: 0.75s all;
        }

        .hamburger-menu:hover div {
            background-color: #fc3;
        }

        .hamburger-menu.active div {
            background-color: #f33;
        }

        .hamburger-menu div:nth-child(odd) {
            width: 15px;
            transition: transform 0.5s cubic-bezier(0.54, -0.81, 0.57, 0.57);
        }

        .hamburger-menu div:nth-child(even) {
            width: 30px;
        }

        .hamburger-menu div:nth-child(1) {
            transform-origin: right;
        }

        .hamburger-menu div:nth-child(3) {
            align-self: flex-end;
            transform-origin: left;
        }

    .active div:nth-child(1) {
        transform: rotate(-90deg) translateX(3px);
    }

    .active div:nth-child(3) {
        transform: rotate(-90deg) translateX(-3px);
    }
}

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<header>
            <a class="title">Perpetual J Studios</a>
            <nav id="globalnav">
                <a href="#" class="active">Home</a>
                <a href="#">About</a>
                <a href="#">Academy</a>
                <a href="#">Software</a>
                <a href="#">Apps</a>
                <a href="#">Games</a>
            </nav>
        </header>

        <div class="hamburger-menu">
            <div class="half"></div>
            <div></div>
            <div class="half"></div>
        </div>

        <!-- BODY -->
        <div class="main-content">
                <div class="container">
        <ul class="tiles">
            <li class="tile">
                <i class="fas fa-mobile icon" aria-hidden="true"></i>
                <p class="title">Budget</p>
                <p class="amount">Example</p>
            </li>
            <li class="tile">
                <i class="fas fa-mobile icon" aria-hidden="true"></i>
                <p class="title">OBD Reader</p>
                <p class="amount">Work in Progress</p>
            </li>
            <li class="tile">
                <i class="fas fa-mobile icon" aria-hidden="true"></i>
                <p class="title">Vehicle Dashboard</p>
                <p class="amount">Work in Progress</p>
            </li>
        </ul>
    </div>
        </div>

---

我忘了提到 form 元素现在有一个 -1 的内联 z-index 以确保呈现所有其他内容在它之上，并且在调试期间可以通过 DOM 轻松访问，我可能会在最终发布之前将其删除。

Answer 1

您为这 3 个页面指定了错误的 js 文件路径。将路径更改为 <script src="../Scripts/Navigation.js"></script>它们在文件夹内。