0

我有一个网站，通过媒体查询在这么多像素下显示汉堡按钮。当您单击汉堡包时，它会显示垂直堆叠的菜单选项（非常简单）。我有一个事件侦听器，它应该在单击某个项目时显示/隐藏移动菜单（因此，当用户单击某些内容时，下拉菜单不仅仅停留在那里）。

这些项目具有 id="nav-mobile" 并且 app.js 相应地定位它们。

我的问题是，当单击一个链接时，它成功隐藏了下拉菜单，而另一个则没有。我从字面上复制并粘贴了 html 文件，使其彼此相同，保存页面标题和 h1 内容。

此外，我正在使用 Swup js 进行页面转换，这似乎有其自身的一系列问题，但据我所知，这不是问题。我是 JS 的新手，所以我希望这是一个明显的新手错误。

这是music.html（由于某种原因，这个做了它应该做的事情）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <script defer src="app.js"></script>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
   
    <title>Misenheimer | Music</title>
</head>
<body>
    <header>

        <div class="nav-container">
    
            <nav>
                
                <div class="icon-container">
                    <div class= nav-icon><a href="/index.html" class="computer-link"><img class="computer-icon" src="./images/computer-4.png" alt="computer icon"></img></a></div>
                </div>
                
                <button class="hamburger" id="hamburger"><i class="fas fa-bars"></i></button>
                
                <ul class="nav-menu" id="nav-menu">  

                    <li class="nav-item"><a href='/music.html' class=nav-link>music.</a></li>               
                    <li class="nav-item"><a href='/about.html' class=nav-link>about.</a></li>
                
                    <li id="nav-mobile" class="nav-item-mobile" ><a href='/music.html' class=nav-link>music</a></li>
                    <li id="nav-mobile" class="nav-item-mobile" ><a href='/about.html' class=nav-link>about</a></li>
                    
                </ul>
    
            </nav>
             
        </div>  
    
    </header>

    <main id="swup" class="transition-fade">
        <h1>Music</h1>
    </main>

</body>
</html>

这里是about.html（这个选中后不隐藏菜单）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <script defer src="app.js"></script>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
   
    <title>Misenheimer | About</title>
</head>
<body>
    <header>

        <div class="nav-container">
    
            <nav>
                
                <div class="icon-container">
                    <div class= nav-icon><a href="/index.html" class="computer-link"><img class="computer-icon" src="./images/computer-4.png" alt="computer icon"></img></a></div>
                </div>
                
                <button class="hamburger" id="hamburger"><i class="fas fa-bars"></i></button>
                
                <ul class="nav-menu" id="nav-menu">  

                    <li class="nav-item"><a href='/music.html' class=nav-link>music.</a></li>               
                    <li class="nav-item"><a href='/about.html' class=nav-link>about.</a></li>
                
                    <li id="nav-mobile" class="nav-item-mobile" ><a href='/music.html' class=nav-link>music</a></li>
                    <li id="nav-mobile" class="nav-item-mobile" ><a href='/about.html' class=nav-link>about</a></li>
                    
                </ul>
    
            </nav>
             
        </div>  
    
    </header>

    <main id="swup" class="transition-fade">
        <h1>About</h1>
    </main>
    
</body>
</html>

这是我的 JS 文件：

const swup = new Swup();

const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
const navItem = document.getElementById('nav-mobile');


hamburger.addEventListener('click', () => {
    navMenu.classList.toggle('show');
});

// This toggles mobile menu when a menu item is clicked.

navItem.addEventListener('click', () => {
    navMenu.classList.toggle('show');
});

这是 CSS（包括这个，以防有人可能知道 Swup 存在问题）：

:root {
    --bghome: black;
    --bgmusic: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    --bgabout: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/*-----------------------------Navigation---------------------------*/
.nav-container {
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
}
nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0;
    background-color: #eee;
} 

/* Home page icon styles */
.icon-container {
    display: flex;
    align-items: center;
    justify-items: center;
    height: 60px;
    padding: 0;
    margin: 0;
}
.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 120px;
    padding: 0;
    transition: 0.6s ease;
}

.nav-icon:hover {
    transition: 0.6s ease;
    background-color: #048383;
}

.computer-link {
    padding: 0px 40px;
}
.computer-icon {
    padding: 0;
    transition: 0.5s ease;
}
.computer-icon:hover {  
    transform: rotate(5deg);
    transition: 0.5s ease;
}

/* Navigation Menu (excluding home page icon) */

.nav-item-mobile {
    display: none;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-items: center;
    height: 60px;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.hamburger {
    display: none;
    margin-left: auto;
    margin-right: 20px;
    padding: 10px;
    background-color: transparent;
    border: none;
    color: #000;
    font-size: 30px;
    cursor: pointer;
}

.hamburger:focus {
    outline: none;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 120px;
    padding: 0;
    transition: 0.6s ease;
}

.nav-item:hover {
    transition: 0.6s ease;
    background-color: #048383;
}
.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: inherit;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;
    color: #444;
    text-decoration: none;
}


/*----- Page Transition ------ */

.transition-fade {
    transition: 0.6s;
    opacity: 1;
}

html.is-animating .transition-fade {
    opacity: 0;
}

@media screen and (max-width: 750px){

    .nav-menu {
        display: none;
        flex-direction: column;
    }
    
    .nav-item {
        display: none;
    }

    .nav-item-mobile {
        display: flex;
        width: 100%;
    }
    .nav-menu.show {
        display: flex;
        width: 100%;
    }

    .hamburger {
        display: block;
    }


}
4

1 回答 1

0

我想出了一个让它工作的方法。同样，我是 JS 的新手。所以，也许这只是一个创可贴。我所做的是为每个链接制作单独的事件处理程序（每个链接都有不同的目标 ID）。这解决了我的问题。似乎正在发生的只是第一个具有目标 id 的项目正在运行脚本。也许这是一个JS的事情。与类不同，您不能拥有多个具有相同 ID 的对象。

const swup = new Swup();

const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
const navMusic = document.getElementById('nav-music');
const navAbout = document.getElementById('nav-about');

hamburger.addEventListener('click', () => {
    navMenu.classList.toggle('show');
});

// This toggles mobile menu when a menu item is clicked.

navMusic.addEventListener('click', () => {
    navMenu.classList.toggle('show');
});

navAbout.addEventListener('click', () => {
    navMenu.classList.toggle('show');
});
于 2022-01-25T00:35:29.183 回答