本文详细介绍了如何在不刷新页面的情况下，通过j*ascript实现点击内部锚点链接时自动关闭导航下拉菜单并重置汉堡图标状态。教程涵盖了初始的html、css和j*ascript设置，并提供了针对锚点链接的事件监听解决方案，确保用户体验的流畅性。
在现代网页设计中，导航菜单通常采用下拉式或侧滑式，并通过“汉堡”图标进行切换。一个常见的用户体验问题是，当用户打开下拉菜单并点击其中的内部锚点链接（例如，#about-us）跳转到页面特定部分时，下拉菜单并不会自动关闭，汉堡图标也不会恢复到初始状态。这可能导致用户困惑，并影响页面的整体交互流畅性。本教程将指导您如何通过J*aScript解决这一问题，确保点击锚点链接后菜单能够优雅地关闭。
为了更好地理解解决方案，我们首先回顾一下典型的汉堡菜单和下拉菜单的HTML结构、CSS样式以及基本的J*aScript交互逻辑。
一个典型的导航菜单可能包含以下结构：
<div class="n*bar--middle n*bar-hide" id="n*bar--middle">
<div style="height: 50px;"></div>
<div class="n*-contents">
<a class="about" href="#about-us">About us</a>
<!-- 更多导航链接 -->
</div>
</div>
<div class="n*bar--right">
<div class="hamburger" id="hamburger">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>
<!-- 页面内容，包含锚点目标 -->
<p>Lorem Ipsum is simply dummy text...</p>
<h2><a name="about-us"></a>About Us</h2>
<p>Lorem Ipsum is simply dummy text...</p>这里，n*bar--middle 是下拉菜单容器，hamburger 是汉堡图标。n*-contents 内部包含指向页面内部锚点的链接。
CSS主要负责菜单的显示/隐藏、定位以及汉堡图标的动画效果：
即梦AI
一站式AI创作平台，免费AI图片和视频生成。
16094
查看详情
.n*bar--middle {
display: none; /* 默认隐藏 */
position: fixed;
background: #dedede;
width: 100%;
/* 其他样式 */
z-index: 9999;
}
.hamburger {
/* 汉堡图标样式 */
display: inline-block;
cursor: pointer;
position: fixed;
z-index: 9999;
/* 其他样式 */
}
/* 汉堡图标动画效果 */
.change .icon1 {
transform: rotate(-45deg) translate(-5px, 4px);
}
.change .icon2 {
opacity: 0;
}
.change .icon3 {
transform: rotate(45deg) translate(-6px, -5px);
}关键在于 n*bar--middle 默认 display: none;，并通过J*aScript来切换其显示状态。汉堡图标的 .change 类则控制其变为“关闭”图标的动画。
最初的J*aScript代码通常只处理汉堡图标的点击事件，用于切换菜单的显示和汉堡图标的动画：
var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('n*bar--middle');
// 初始设置菜单为隐藏（如果CSS未设置）
// 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 hamburger = document.getElementById('hamburger');
var menu = document.getElementById('n*bar--middle');
// 1. 汉堡图标点击事件：切换菜单显示/隐藏和汉堡图标动画
hamburger.addEventListener('click', function() {
this.classList.toggle("change"); // 切换汉堡图标动画
if (menu.style.display === "none") {
menu.style.display = "block"; // 显示菜单
} else {
menu.style.display = "none"; // 隐藏菜单
}
});
// 2. 锚点链接点击事件：关闭菜单并重置汉堡图标
var anchors = document.querySelectorAll('.n*-contents > a'); // 获取所有导航锚点链接
anchors.forEach(item => {
item.addEventListener('click', () => {
menu.style.display = "none"; // 隐藏菜单
hamburger.classList.remove("change"); // 移除汉堡图标的"change"类，恢复其初始状态
});
});为了方便理解，以下是整合了HTML、CSS和J*aScript的完整示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu with Anchor Link Close</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-n*">
<div class="n*bar--middle" id="n*bar--middle">
<div style="height: 50px;"></div>
<div class="n*-contents">
<a class="about" href="#about-us">关于我们</a>
<a class="services" href="#services">服务</a>
<a class="contact" href="#contact">联系我们</a>
</div>
</div>
<div class="n*bar--right">
<div class="hamburger" id="hamburger">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h2><a name="about-us"></a>关于我们</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h2><a name="services"></a>服务</h2>
<p>
This is the services section. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<h2><a name="contact"></a>联系我们</h2>
<p>
Contact us here. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<script src="script.js"></script>
</body>
</html>body {
font-family: Arial, sans-serif;
margin: 0;
padding-top: 80px; /* 留出顶部导航空间 */
}
.main-n* {
display: flex;
flex-direction: row;
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 10000; /* 确保导航在最上层 */
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.main-n* .n*-contents {
font-size: 20px; /* 调整字体大小 */
padding: 20px 0;
}
.n*-contents a {
display: block;
padding: 10px 55px;
text-decoration: none;
color: #333;
transition: background-color 0.3s ease;
}
.n*-contents a:hover {
background-color: #f0f0f0;
}
.n*bar--middle {
display: none; /* 默认隐藏 */
position: fixed;
background: #dedede;
width: 100%;
padding: 20px 10px 20px 0px; /* 调整内边距 */
height: 100%; /* 全屏高度 */
top: 0;
left: 0;
z-index: 9999;
overflow-y: auto; /* 允许内容滚动 */
}
.hamburger {
display: inline-block;
cursor: pointer;
position: absolute; /* 相对于 .main-n* 定位 */
z-index: 9999;
background: white;
padding: 10px;
margin: 0;
right: 20px; /* 调整右侧定位 */
top: 10px; /* 调整顶部定位 */
border-radius: 50%;
border: 4px solid green;
}
.icon1, .icon2, .icon3 {
width: 25px;
height: 3px;
background-color: orange;
margin: 4px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.change .icon1 {
-webkit-transform: rotate(-45deg) translate(-5px, 4px);
transform: rotate(-45deg) translate(-5px, 4px);
}
/* Fade out the second bar */
.change .icon2 {
opacity: 0;
}
/* Rotate last bar */
.change .icon3 {
-webkit-transform: rotate(45deg) translate(-6px, -5px);
transform: rotate(45deg) translate(-6px, -5px);
}
/* 响应式调整 */
@media (min-width: 768px) {
.hamburger, .n*bar--middle {
display: none !important; /* 在大屏幕上隐藏汉堡和下拉菜单 */
}
.main-n* .n*-contents {
display: flex; /* 在大屏幕上显示为水平导航 */
width: auto;
padding: 0;
margin-left: auto; /* 将导航推到右侧 */
}
.n*-contents a {
display: inline-block;
padding: 20px 15px;
}
}document.addEventListener('DOMContentLoaded', function() {
var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('n*bar--middle');
// 1. 汉堡图标点击事件：切换菜单显示/隐藏和汉堡图标动画
if (hamburger && menu) { // 确保元素存在
hamburger.addEventListener('click', function() {
this.classList.toggle("change"); // 切换汉堡图标动画
if (menu.style.display === "none" || menu.style.display === "") {
menu.style.display = "block"; // 显示菜单
} else {
menu.style.display = "none"; // 隐藏菜单
}
});
}
// 2. 锚点链接点击事件：关闭菜单并重置汉堡图标
var anchors = document.querySelectorAll('.n*-contents > a'); // 获取所有导航锚点链接
anchors.forEach(item => {
item.addEventListener('click', () => {
if (menu.style.display === "block") { // 仅当菜单打开时才执行关闭操作
menu.style.display = "none"; // 隐藏菜单
if (hamburger) { // 确保汉堡图标存在
hamburger.classList.remove("change"); // 移除汉堡图标的"change"类，恢复其初始状态
}
}
});
});
});以上就是如何在点击锚点链接后关闭下拉菜单而不刷新页面的详细内容，更多请关注其它相关文章！
# javascript
# css
# 如何开始短视频推广营销
# 江门企业网站优化是什么
# 电话营销推广外包
# 甘肃本地网站建设
# 三门峡企业网站推广
# 静安抖音关键词排名价格多少
# 外国网站建设视频
# 云南小红书用户推广网站
# 阜阳网站建设市场有多大
# 无锡网站seo优化服务
# 自适应
# 全选
# 流畅性
# 双击
# 关于我们
# 如何在
# 而不
# 移除
# 回调
# 网页设计
# ai
# ssl
# 回调函数
# access
# node
# js
# html
# java
相关栏目：
【
Google疑问12 】
【
Facebook疑问10 】
【
优化推广96088 】
【
技术知识133117 】
【
IDC资讯59369 】
【
网络运营7196 】
【
IT资讯61894 】
相关推荐：
Flexbox布局：实现粘性导航与底部页脚的完美结合
海棠阅读网页版_进入海棠网页版在线阅读中心
如何在CSS中设置背景图像：一个全面指南
如何在CSS中使用absolute实现登录弹窗居中_transform translate结合
动漫之家观看全集库 动漫之家免费资源网地址
Win11怎么录屏_Windows 11自带Xbox Game Bar录制视频
抖音火山版如何进行提现
poki官网最新入口 poki小游戏大全入口
掌握产品代码正则表达式：避免常见陷阱与精确匹配
PHP实现等比数列：构建数组元素基于前一个值递增的方法
微信朋友圈怎么设置三天可见 微信朋友圈设置指定天数可见步骤【教程】
TikTok视频播放不流畅怎么办 TikTok视频播放优化方法
创建快捷方式启动系统保护
139邮箱登录入口官网 139邮箱登录入口官网网址
汽水音乐在线入口 汽水音乐网页端官方页面快速打开
谷歌邮箱怎么换绑定邮箱Gmail安全备份邮箱修改方法
lol小红书怎么|直播|？lol小红书|直播|是什么意思？
豆包AI怎样为教育场景定制答疑逻辑_为教育场景定制豆包AI答疑逻辑方案【方案】
Windows Audio服务启动失败怎么办_电脑没声音的终极服务修复法【修复】
如何在Python中安全地将环境变量转换为整数并满足Mypy类型检查
《随手记》备份数据方法
钉钉任务无法提醒如何处理 钉钉任务提醒优化方法
C++二维数组动态分配方法_C++指针与数组内存布局
漫蛙漫画官方网站使用_漫蛙manwa网页版在线入口教程
铁路12306官网登录入口 铁路12306在线购票官方平台
2025考研成绩查询时间入口分享
如何通过settings.json个性化您的VS Code体验
word页码灰色不能用如何解决
《华夏千秋》龙女试炼功法获取方法
Win10运行窗口在哪里打开 Win10调出运行命令框快捷键【技巧】
J*aScript二进制处理_ArrayBuffer与Blob
知音漫客官网首页入口_知音漫客热门漫画推荐
Chart.js 教程：自定义插件实现图表与图例间距调整
b站怎么用微信登录_b站微信登录方法
PHP中动态类名访问的类实例类型提示与静态分析实践
word文档中的分隔符有哪些不同类型和用途_Word分隔符类型与用途方法
菜鸟裹裹怎样获得取件码_菜鸟裹裹获得取件码步骤
折叠屏手机充不进电是什么问题？ 特殊结构带来的维修难点
iSpring三分屏制作教程
酷狗音乐多音轨设置教程
mysql镜像配置如何设置用户权限组_mysql镜像配置用户组与权限分级管理方法
J*aScript大数运算_BigInt使用指南
《下一站江湖2》心法融合技巧
响应式设计中动态背景颜色条的实现指南
J*a中导出MySQL表为SQL脚本的两种方法
植物大战僵尸95版游戏版下载_植物大战僵尸95版游戏版安装指南
鸣潮历史学家灯塔位置一览
J*aScript与HTML元素交互：图片点击事件与链接处理教程
汽水音乐官网网页版入口 汽水音乐官网网页版在线入口
如何在CSS中使用过渡制作按钮边框渐变_border-color transition实现
2025-10-26
运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。