Question

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

在输入问题并输入下面的代码段后，我似乎无法在此处复制该代码，并且已将此处的代码与我的网页上的代码进行了比较，并且一切看起来都一样。我对此实在无所适从，在这里无法复制之后，我开始认为它可能是Edge缓存的东西之间的交叉样式，但是在DOM中进行了进一步检查之后，似乎并没有情况。

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

要与实际发生的情况进行比较，请随时访问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元素现在具有z-index的内联-1，以确保所有其他内容都呈现在其顶部，并且可以通过{{ 1}}，在调试期间，我可能会在最终发行版之前将其删除。

Answer 1

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

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

1 个答案: