如何解决单击其中一个链接后,如何让导航菜单消失?
这是我第一次在这里提问,所以如果它令人困惑,请原谅我。我在 youtube 上做了一个来自 DevEd 的在线教程,他向您展示了如何编写响应式动画导航栏。原始视频可以在这里找到...
我想知道的是如何更改 js,以便在单击链接和单击汉堡按钮时导航菜单消失。这是 HTML...
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Projects</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
这里是js...
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
//toggle nav
burger.addEventListener('click',() => {
nav.classList.toggle('nav-active');
//animate links
navLinks.forEach((link,index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
我是这方面的相对新手,所以请放轻松。 提前致谢!
解决方法
转到函数中要隐藏导航栏的位置,然后执行:
document.getElementsByTagName("nav")[0].style.display = "none";
,
经过一番挖掘,我发现了一个类似的问题,这是解决方案:
const closeNav = () => {
nav.classList.toggle('nav-active');
burger.classList.toggle('toggle');
}
navLinks.forEach(link => link.addEventListener('click',closeNav));
}
在 burger.classList.toggle('toggle'); });
之后添加到 ajvascript
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。