本文旨在解决在单页应用或网页中，点击下拉菜单中的锚点链接时，菜单不自动关闭的问题。我们将通过 JavaScript 代码，监听锚点链接的点击事件，实现点击后关闭菜单并切换 Hamburger 图标状态，从而优化用户体验。
在网页开发中，下拉菜单是一种常见的导航方式。但当下拉菜单中包含指向页面内部锚点的链接时，用户点击这些链接后，菜单往往不会自动关闭，这会影响用户体验。本文将介绍如何使用 JavaScript 监听锚点链接的点击事件，实现点击后自动关闭菜单并切换 Hamburger 图标状态。
解决方案
核心思路是：
获取下拉菜单中所有锚点链接元素。为每个锚点链接添加点击事件监听器。在点击事件处理函数中，关闭下拉菜单并切换 Hamburger 图标的 change class。
以下是具体的代码实现：
立即学习“Java免费学习笔记（深入）”；
var hamburger = document.getElementById('hamburger');var menu = document.getElementById('navbar--middle');menu.style.display = "none";hamburger.addEventListener('click', function() { this.classList.toggle("change"); if (menu.style.display === "none") { menu.style.display = "block"; } else { menu.style.display = "none"; }});// 获取所有锚点链接var anchors = document.querySelectorAll('.nav-contents > a');// 遍历锚点链接，添加点击事件监听器anchors.forEach(item => { item.addEventListener('click', () => { // 关闭菜单 menu.style.display = "none"; // 切换 Hamburger 图标状态 hamburger.classList.toggle("change"); });});
代码解释：
document.querySelectorAll(‘.nav-contents > a’): 使用 querySelectorAll 方法获取所有 class 为 nav-contents 的元素下的所有 a 标签（锚点链接）。请根据你的 HTML 结构调整选择器。anchors.forEach(item => { … }): 遍历所有获取到的锚点链接。item.addEventListener(‘click’, () => { … }): 为每个锚点链接添加点击事件监听器。menu.style.display = “none”;: 设置菜单的 display 属性为 none，从而关闭菜单。hamburger.classList.toggle(“change”);: 切换 Hamburger 图标的 change class，实现 Hamburger 图标的切换效果。
HTML 结构示例：
About Us
...
CSS 样式示例：
.navbar--middle { display: none; /* 其他样式 */}.hamburger { /* 其他样式 */}.change .icon1 { /* Hamburger 图标切换后的样式 */}.change .icon2 { /* Hamburger 图标切换后的样式 */}.change .icon3 { /* Hamburger 图标切换后的样式 */}
注意事项
确保 JavaScript 代码在 HTML 元素加载完毕后执行，可以将代码放在
以上就是JavaScript：点击锚点链接关闭下拉菜单并切换 Hamburger 状态的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588768.html
微信扫一扫 
支付宝扫一扫 
