如何在点击锚点链接后关闭下拉菜单并切换汉堡包图标（不刷新页面）

本文旨在解决网页中点击内部锚点链接时，下拉菜单未能自动关闭且汉堡包图标状态未复位的问题。通过详细的j*ascript代码示例和解释，我们将展示如何监听锚点链接的点击事件，并在事件触发时隐藏下拉菜单并切换汉堡包图标的视觉状态，从而优化用户体验，确保导航的连贯性。

在现代网页设计中，下拉菜单（通常由“汉堡包”图标控制）是移动端或响应式布局中常见的导航模式。用户点击汉堡包图标时，菜单展开；再次点击或点击关闭按钮时，菜单收起。然而，当下拉菜单中包含指向页面内部特定部分的锚点链接（例如#about-us）时，一个常见的问题是，点击这些链接后页面会滚动到目标位置，但下拉菜单并不会自动关闭，同时汉堡包图标的状态也可能保持为“打开”状态，这会影响用户体验。

问题分析

初始的J*aScript代码通常只处理汉堡包图标的点击事件，以切换菜单的显示状态和汉堡包图标自身的动画效果。例如：

var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('n*bar--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"; // 隐藏菜单
  }
});

这段代码能够正确地处理汉堡包图标的点击事件，但它并未考虑菜单内部锚点链接的点击行为。当用户点击一个锚点链接时，浏览器会执行默认的滚动行为，但不会触发汉堡包图标的点击事件，因此菜单状态不会改变。

解决方案：监听锚点链接点击事件

要解决此问题，我们需要为下拉菜单中的每个锚点链接添加一个独立的事件监听器。当这些锚点链接被点击时，我们需要手动执行两个操作：

隐藏下拉菜单。
将汉堡包图标的状态切换回其初始（未激活）状态。

以下是实现这一功能的具体步骤和代码：

1. 获取所有锚点链接

首先，我们需要选择下拉菜单中所有相关的锚点链接。根据提供的HTML结构，这些链接位于.n*-contents类下的标签中。

<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>

我们可以使用document.querySelectorAll()方法来获取这些元素。

var anchors = document.querySelectorAll('.n*-contents > a');

2. 遍历并添加事件监听器

获取到所有锚点链接后，我们需要遍历这个NodeList（或数组），并为每个链接添加一个click事件监听器。

anchors.forEach(item => {
    item.addEventListener('click', () => {
        // 在这里执行关闭菜单和切换汉堡包图标的逻辑
    });
});

3. 实现关闭逻辑

在每个锚点链接的click事件监听器内部，我们需要执行以下操作：

小爱开放平台

小米旗下小爱开放平台

291 查看详情小爱开放平台

将菜单的display样式设置为"none"以隐藏菜单。
使用classList.toggle("change")方法来切换汉堡包图标的change类。由于菜单关闭时汉堡包图标应该恢复到原始状态，如果它当前处于“改变”状态（即菜单打开），toggle会移除change类，使其恢复。

将这些逻辑整合到一起，完整的J*aScript代码如下：

// 获取汉堡包图标和菜单元素
var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('n*bar--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('.n*-contents > a');

// 为每个锚点链接添加点击事件监听器
anchors.forEach(item => {
    item.addEventListener('click', () => {
        // 隐藏菜单
        menu.style.display = "none";
        // 切换汉堡包图标回初始状态
        // 确保只有在菜单打开时才移除'change'类
        if (hamburger.classList.contains("change")) {
            hamburger.classList.remove("change");
        }
    });
});

优化说明： 在锚点链接的点击事件中，我们使用hamburger.classList.remove("change")来确保汉堡包图标恢复到初始状态。如果直接使用toggle("change")，当菜单已经关闭（change类不存在）时，它会错误地添加change类。因此，更稳妥的做法是检查change类是否存在，如果存在则移除它。

完整代码示例

为了更好地展示，我们结合HTML、CSS和J*aScript来提供一个完整的示例。

HTML结构 (index.html)

<!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 Links</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <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">关于我们</a></div>
        <div class="n*-contents"><a class="services" href="#services">服务</a></div>
        <div class="n*-contents"><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>

    <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>
    <div style="height: 800px;"></div> <!-- 占位符，确保页面有足够滚动空间 -->
    <h2>
        <a name="services"></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>
    <div style="height: 800px;"></div>
    <h2>
        <a name="contact"></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>

    <script src="script.js"></script>
</body>
</html>

CSS样式 (style.css)

body {
    margin: 0;
    font-family: sans-serif;
}

.main-n* {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0 auto;
}

.main-n* .n*-contents {
    font-size: 40px;
    width: 50%;
    padding: 20px 0;
}

.n*bar--middle {
    display: none; /* 由JS控制显示/隐藏 */
    position: fixed;
    background: #dedede;
    width: 100%;
    padding: 20px 10px 20px 55px;
    height: 35%;
    top: 0;
    z-index: 9999;
    box-sizing: border-box; /* 确保padding不影响宽度 */
}

.n*-contents a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 10px 0;
    font-size: 24px;
}

.n*-contents a:hover {
    color: green;
}

.hamburger {
    display: inline-block;
    cursor: pointer;
    position: fixed;
    z-index: 10000; /* 比菜单高一层 */
    background: white;
    padding: 10px;
    margin: 0;
    right: 5%;
    top: 3%;
    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 (max-width: 480px) {
    .center-logo-below-menu .logo, .logo {
        padding: 0 !important;
    }
}

J*aScript (script.js)

// 获取汉堡包图标和菜单元素
var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('n*bar--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('.n*-contents > a');

// 为每个锚点链接添加点击事件监听器
anchors.forEach(item => {
    item.addEventListener('click', () => {
        // 隐藏菜单
        menu.style.display = "none";
        // 切换汉堡包图标回初始状态
        // 确保只有在菜单打开时才移除'change'类
        if (hamburger.classList.contains("change")) {
            hamburger.classList.remove("change");
        }
    });
});

注意事项与最佳实践

语义化HTML与可访问性： 考虑为下拉菜单添加WAI-ARIA属性，例如aria-expanded、aria-controls等，以增强屏幕阅读器用户的可访问性。
CSS过渡效果： 当前示例使用display: none/block切换菜单显示，这会导致即时的显示/隐藏，没有过渡效果。如果需要平滑的动画，可以考虑使用visibility和opacity，或者max-height配合overflow: hidden和transition属性。
代码组织： 对于更复杂的导航系统，可以将菜单的打开和关闭逻辑封装成独立的函数，提高代码的可维护性和复用性。
事件委托： 如果下拉菜单中的锚点链接数量非常多，或者链接是动态添加的，可以考虑使用事件委托（将事件监听器添加到父元素上），而不是为每个链接单独添加监听器，以提高性能。但在本例中，直接遍历添加是完全可行的。
防止页面滚动： 锚点链接的默认行为是滚动到页面指定位置。如果需要阻止这种默认行为（例如，在某些单页应用中），可以使用event.preventDefault()，但对于传统的锚点导航，通常不需要阻止。

总结

通过为下拉菜单内的锚点链接添加额外的点击事件监听器，并在这类事件触发时手动控制菜单的显示状态和汉堡包图标的样式，我们成功解决了点击锚点链接后菜单不关闭的问题。这种方法确保了导航行为的一致性，提升了用户在单页应用或长页面导航时的体验流畅度。

以上就是如何在点击锚点链接后关闭下拉菜单并切换汉堡包图标（不刷新页面）的详细内容，更多请关注其它相关文章！

返回目录在线咨询

上一篇：css浮动float属性与布局配合
下一篇：Next.js 组件中 Image 组件缺失 "src" 属性问题的解决

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商