本文详细介绍了如何在不刷新页面的情况下，通过javascript实现点击内部锚点链接时自动关闭导航下拉菜单并重置汉堡图标状态。教程涵盖了初始的html、css和javascript设置，并提供了针对锚点链接的事件监听解决方案，确保用户体验的流畅性。
在现代网页设计中，导航菜单通常采用下拉式或侧滑式，并通过“汉堡”图标进行切换。一个常见的用户体验问题是，当用户打开下拉菜单并点击其中的内部锚点链接（例如，#about-us）跳转到页面特定部分时，下拉菜单并不会自动关闭，汉堡图标也不会恢复到初始状态。这可能导致用户困惑，并影响页面的整体交互流畅性。本教程将指导您如何通过JavaScript解决这一问题，确保点击锚点链接后菜单能够优雅地关闭。
为了更好地理解解决方案，我们首先回顾一下典型的汉堡菜单和下拉菜单的HTML结构、CSS样式以及基本的JavaScript交互逻辑。
一个典型的导航菜单可能包含以下结构：
<div class="navbar--middle navbar-hide" id="navbar--middle">
<div style="height: 50px;"></div>
<div class="nav-contents">
<a class="about" href="#about-us">About us</a>
<!-- 更多导航链接 -->
</div>
</div>
<div class="navbar--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>这里，navbar--middle 是下拉菜单容器，hamburger 是汉堡图标。nav-contents 内部包含指向页面内部锚点的链接。
CSS主要负责菜单的显示/隐藏、定位以及汉堡图标的动画效果：
.navbar--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);
}关键在于 navbar--middle 默认 display: none;，并通过JavaScript来切换其显示状态。汉堡图标的 .change 类则控制其变为“关闭”图标的动画。
最初的JavaScript代码通常只处理汉堡图标的点击事件，用于切换菜单的显示和汉堡图标的动画：
var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('navbar--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('navbar--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('.nav-contents > a'); // 获取所有导航锚点链接
anchors.forEach(item => {
item.addEventListener('click', () => {
menu.style.display = "none"; // 隐藏菜单
hamburger.classList.remove("change"); // 移除汉堡图标的"change"类，恢复其初始状态
});
});为了方便理解，以下是整合了HTML、CSS和JavaScript的完整示例。
<!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-nav">
<div class="navbar--middle" id="navbar--middle">
<div style="height: 50px;"></div>
<div class="nav-contents">
<a class="about" href="#about-us">关于我们</a>
<a class="services" href="#services">服务</a>
<a class="contact" href="#contact">联系我们</a>
</div>
</div>
<div class="navbar--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-nav {
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-nav .nav-contents {
font-size: 20px; /* 调整字体大小 */
padding: 20px 0;
}
.nav-contents a {
display: block;
padding: 10px 55px;
text-decoration: none;
color: #333;
transition: background-color 0.3s ease;
}
.nav-contents a:hover {
background-color: #f0f0f0;
}
.navbar--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-nav 定位 */
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, .navbar--middle {
display: none !important; /* 在大屏幕上隐藏汉堡和下拉菜单 */
}
.main-nav .nav-contents {
display: flex; /* 在大屏幕上显示为水平导航 */
width: auto;
padding: 0;
margin-left: auto; /* 将导航推到右侧 */
}
.nav-contents a {
display: inline-block;
padding: 20px 15px;
}
}document.addEventListener('DOMContentLoaded', function() {
var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('navbar--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('.nav-contents > a'); // 获取所有导航锚点链接
anchors.forEach(item => {
item.addEventListener('click', () => {
if (menu.style.display === "block") { // 仅当菜单打开时才执行关闭操作
menu.style.display = "none"; // 隐藏菜单
if (hamburger) { // 确保汉堡图标存在
hamburger.classList.remove("change"); // 移除汉堡图标的"change"类，恢复其初始状态
}
}
});
});
});通过以上步骤，您已经成功地为下拉菜单中的锚点链接添加了智能关闭功能，极大地提升了用户在页面内部导航时的体验。这个解决方案简单有效，且不涉及页面刷新，是构建现代响应式导航菜单的重要一环。
以上就是如何在点击锚点链接后关闭下拉菜单而不刷新页面的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
751
收藏
