如何将跳转至网站区块前关闭菜单的jQuery代码转换为纯JavaScript实现？并验证DOMContentLoaded是否可替代$(document).ready

关于$(document).ready的原生替代 #

完全没问题！document.addEventListener("DOMContentLoaded", function() { /* 代码 */ })就是$(document).ready的标准原生JS替代方案。jQuery的ready方法本质上就是封装了DOMContentLoaded事件（还兼容了一些旧浏览器的特殊情况，但现代浏览器里直接用DOMContentLoaded就足够了），它会在DOM结构完全加载完成后触发，不需要等待图片、样式表等外部资源加载完毕，和jQuery的ready行为完全一致。

jQuery代码转原生JavaScript实现 #

咱们直接把你的jQuery代码转换成原生版本，每一步都对应原逻辑：

完整原生JS代码 #

document.addEventListener("DOMContentLoaded", function() {
  // 获取所有.menu-mobile下的a元素
  const mobileMenuLinks = document.querySelectorAll('.menu-mobile a');
  
  // 给每个链接绑定点击事件
  mobileMenuLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转行为
      closeNav(); // 执行关闭导航的函数
      
      setTimeout(() => {
        const nextPage = this.href; // 这里用this代替e.currentTarget，效果一致
        window.location.href = nextPage; // 延迟后跳转
      }, 1000); // 延迟时间和原代码保持一致
    });
  });
});

关键转换点说明 #

• 选择器替换：$('.menu-mobile a') → document.querySelectorAll('.menu-mobile a')，后者会返回一个包含所有匹配元素的NodeList，我们用forEach循环给每个元素绑定事件。
• 事件绑定：click(function() {}) → addEventListener('click', function() {})，这是原生JS绑定事件的标准方式。
• 元素引用：原代码里的e.currentTarget.href可以直接换成this.href（因为在事件处理函数里，this指向触发事件的元素，和e.currentTarget效果相同），当然你也可以继续用e.currentTarget.href，完全没问题。

注意事项 #

如果你的closeNav()函数原本是用jQuery实现的（比如用$('.nav').hide()之类的操作），记得也要把它转换成原生JS写法：

• 比如隐藏导航菜单：如果是通过添加/移除类来控制显示，就用element.classList.add('hidden')或element.classList.remove('hidden')；
• 如果是直接修改样式，就用element.style.display = 'none'。

内容的提问来源于stack exchange，提问作者BadControl Hypnos