单击锚标记后，汉堡菜单不会关闭

Question

单击菜单中的某个锚项后，我希望能够关闭菜单，但它不起作用。 javascript 中的 remove 方法由于某种原因不起作用。 如果我浏览页面，菜单会自行关闭，但不会在索引页面上关闭并且保持打开状态。 我仍在学习 Javascript，所以请耐心等待。 这是额外的 CSS

 const netflix_open_btn = document.querySelector('.netflix-open-btn'); const netflix_close_btn = document.querySelector('.netflix-close-btn'); const netflix_nav = document.querySelectorAll('.netflix-nav'); netflix_open_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') }); }); netflix_close_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') }); });

 .netflix-text { text-transform: uppercase; } .netflix-list li a:hover{ color: #d6aa55; } .netflix-nav-btn { border: 0; background: transparent; cursor: pointer; font-size: 20px; z-index: 10; } .netflix-open-btn { position: fixed; top: 30px; left: 10px; z-index: 10; } .netflix-nav { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform .3s ease-in-out; z-index: 10; } .netflix-nav.visible { transform: translateX(0); } .netflix-nav-black { background-color: black; width: 60%; max-width: 480px; min-width: 320px; transition-delay: .4s; } .netflix-nav-black.visible { transition-delay: 0s; } .netflix-nav-red { background-color: rgb(214, 170, 85); transition-delay: .2s; width: 95%; } .netflix-nav-red.visible { transition-delay: .2s; } .netflix-nav-white { background-color: #fff; padding: 40px; position: relative; transition-delay: 0s; width: 95%; } .netflix-nav-white.visible { transition-delay: .4s; } .netflix-close-btn { opacity: 0.3; position: absolute; top: 40px; right: 30px; } .netflix-logo { width: 245px; } @media (max-width:768px){ .netflix-logo{ width: 197px; } } .netflix-list { list-style-type: none; padding: 0; } .netflix-list li { margin: 20px 0; } .netflix-list li a { color: rgb(34, 31, 31); font-size: 19px; text-decoration: none; text-transform: uppercase; } .netflix-list ul { list-style-type: none; padding-left: 20px; }

 <button class="netflix-nav-btn netflix-open-btn"> <i class="fas fa-bars fa-2x"></i> </button> <div class="netflix-nav netflix-nav-black"> <div class="netflix-nav netflix-nav-red"> <div class="netflix-nav netflix-nav-white"> <button class="netflix-nav-btn netflix-close-btn"> <i class="fas fa-times"></i> </button> <img class="netflix-logo" src="images/GOLD.png" alt="Logo" /> <ul class="netflix-list"> <li><a href="index-en.php" class="gold">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li> <ul> <li><a href="tattoo-en.html">Tattoo</a></li> <li><a href="beauty-en.html">Beauty</a></li> <li><a href="piercing-en.html">Piercing</a></li> </ul> </li> <li><a href="#contact">Contact</a></li> <li> <a href="index.php">Danish</a><img src="/images//denmark.svg" alt="danish-flag" class="flag" /> </li> </ul> </div> </div> </div>

Answer 1

为此，您必须创建一个函数，每次单击链接时都可以调用该函数！

 const netflix_open_btn = document.querySelector(".netflix-open-btn"); const netflix_nav = document.querySelectorAll(".netflix-nav"); netflix_open_btn.addEventListener("click", () => { netflix_nav.forEach(nav_el => { nav_el.classList.add("visible"); }); }); function closeTab() { netflix_nav.forEach(nav_el => { nav_el.classList.remove("visible"); }); }

 .netflix-text { text-transform: uppercase; } .netflix-list li a:hover { color: #d6aa55; } .netflix-nav-btn { border: 0; background: transparent; cursor: pointer; font-size: 20px; z-index: 10; } .netflix-open-btn { position: fixed; top: 30px; left: 10px; z-index: 10; } .netflix-nav { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.3s ease-in-out; z-index: 10; } .netflix-nav.visible { transform: translateX(0); } .netflix-nav-black { background-color: black; width: 60%; max-width: 480px; min-width: 320px; transition-delay: 0.4s; } .netflix-nav-black.visible { transition-delay: 0s; } .netflix-nav-red { background-color: rgb(214, 170, 85); transition-delay: 0.2s; width: 95%; } .netflix-nav-red.visible { transition-delay: 0.2s; } .netflix-nav-white { background-color: #fff; padding: 40px; position: relative; transition-delay: 0s; width: 95%; } .netflix-nav-white.visible { transition-delay: 0.4s; } .netflix-close-btn { opacity: 0.3; position: absolute; top: 40px; right: 30px; } .netflix-logo { width: 245px; } @media (max-width: 768px) { .netflix-logo { width: 197px; } } .netflix-list { list-style-type: none; padding: 0; } .netflix-list li { margin: 20px 0; } .netflix-list li a { color: rgb(34, 31, 31); font-size: 19px; text-decoration: none; text-transform: uppercase; } .netflix-list ul { list-style-type: none; padding-left: 20px; }

 <button class="netflix-nav-btn netflix-open-btn"> <i class="fas fa-bars fa-2x"></i> open </button> <div class="netflix-nav netflix-nav-black"> <div class="netflix-nav netflix-nav-red"> <div class="netflix-nav netflix-nav-white"> <button onclick="closeTab()" class="netflix-nav-btn netflix-close-btn" > <i class="fas fa-times"></i>close </button> <img class="netflix-logo" src="images/GOLD.png" alt="Logo" /> <ul class="netflix-list"> <li> <a onclick="closeTab()" href="index-en.php" class="gold">Home</a> </li> <li><a onclick="closeTab()" href="#about">About</a></li> <li><a onclick="closeTab()" href="#services">Services</a></li> <li> <ul> <li><a href="tattoo-en.html">Tattoo</a></li> <li><a href="beauty-en.html">Beauty</a></li> <li><a href="piercing-en.html">Piercing</a></li> </ul> </li> <li><a href="#contact">Contact</a></li> <li> <a href="index.php">Danish</a ><img src="/images//denmark.svg" alt="danish-flag" class="flag" /> </li> </ul> </div> </div> </div>

Answer 2

您需要为每个<a>元素附加一个事件侦听器。

 const netflix_open_btn = document.querySelector('.netflix-open-btn'); const netflix_close_btn = document.querySelector('.netflix-close-btn'); const netflix_nav = document.querySelectorAll('.netflix-nav'); const netflix_btns = document.querySelectorAll('.netflix-list a'); netflix_open_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') }); }); netflix_close_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') }); }); var length = netflix_btns.length; for (let x = 0; x < length; x++) { netflix_btns[x].addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') }); }); }

 .netflix-text { text-transform: uppercase; } .netflix-list li a:hover { color: #d6aa55; } .netflix-nav-btn { border: 0; background: transparent; cursor: pointer; font-size: 20px; z-index: 10; } .netflix-open-btn { position: fixed; top: 30px; left: 10px; z-index: 10; } .netflix-nav { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform .3s ease-in-out; z-index: 10; } .netflix-nav.visible { transform: translateX(0); } .netflix-nav-black { background-color: black; width: 60%; max-width: 480px; min-width: 320px; transition-delay: .4s; } .netflix-nav-black.visible { transition-delay: 0s; } .netflix-nav-red { background-color: rgb(214, 170, 85); transition-delay: .2s; width: 95%; } .netflix-nav-red.visible { transition-delay: .2s; } .netflix-nav-white { background-color: #fff; padding: 40px; position: relative; transition-delay: 0s; width: 95%; } .netflix-nav-white.visible { transition-delay: .4s; } .netflix-close-btn { opacity: 0.3; position: absolute; top: 40px; right: 30px; } .netflix-logo { width: 245px; } @media (max-width:768px) { .netflix-logo { width: 197px; } } .netflix-list { list-style-type: none; padding: 0; } .netflix-list li { margin: 20px 0; } .netflix-list li a { color: rgb(34, 31, 31); font-size: 19px; text-decoration: none; text-transform: uppercase; } .netflix-list ul { list-style-type: none; padding-left: 20px; }

 <button class="netflix-nav-btn netflix-open-btn"> <i class="fas fa-bars fa-2x"></i>Open </button> <div class="netflix-nav netflix-nav-black"> <div class="netflix-nav netflix-nav-red"> <div class="netflix-nav netflix-nav-white"> <button class="netflix-nav-btn netflix-close-btn"> <i class="fas fa-times"></i>Close </button> <img class="netflix-logo" src="images/GOLD.png" alt="Logo" /> <ul class="netflix-list"> <li><a href="index-en.php" class="gold">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li> <ul> <li><a href="tattoo-en.html">Tattoo</a></li> <li><a href="beauty-en.html">Beauty</a></li> <li><a href="piercing-en.html">Piercing</a></li> </ul> </li> <li><a href="#contact">Contact</a></li> <li> <a href="index.php">Danish</a><img src="/images//denmark.svg" alt="danish-flag" class="flag" /> </li> </ul> </div> </div> </div>

Answer 3

也许它不会关闭，因为没有页面更改，因此没有重新加载。 您可以使用一些 js 手动关闭它。 您的示例没有与项目点击相关的关闭功能。 前任。：

netflix_nav.addEventListener('click', () => {
    netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});