如何为导航栏所有链接添加菜单关闭后页面跳转延迟功能？

你的代码核心问题是document.querySelector(".nav-link-close")只会选中第一个带有该类名的导航链接，其他链接不会触发这个点击事件。要给所有导航链接添加延迟跳转功能，需要做以下修改：

修改后的代码 #

// 获取所有带有.nav-link-close类的导航链接
document.querySelectorAll(".nav-link-close").forEach(link => {
    link.addEventListener("click", function (e) {
        e.preventDefault();
        // 用currentTarget确保获取绑定事件的链接本身（避免子元素干扰）
        const nextPage = this.href;
        toggleNav(false);
        setTimeout(() => {
            window.location.href = nextPage;
        }, 1000);
    });
});

关键改动说明 #

• 把querySelector换成querySelectorAll，这样能获取所有匹配的导航链接元素
• 用forEach遍历每个链接，给每个元素单独绑定点击事件
• 用this.href（或e.currentTarget.href）代替e.target.href，避免点击链接内部子元素时，e.target不是a标签导致无法正确获取跳转地址的问题

内容的提问来源于stack exchange，提问作者Matthew Proctor