如何在重定向到网站部分之前关闭菜单

Question

我有一个 JQuery 工作代码，它在重定向到正确的部分之前关闭导航。我想将其更改为纯 javascript。你有什么想法如何实现它吗？我搜索了很多主题，但没有找到。

$(document).ready(function() {
$('.menu-mobile a').click(function(e) {
 e.preventDefault(); 
 closeNav();

  setTimeout(() => {
     const nextPage = e.currentTarget.href;
    window.location.href = nextPage;
  },1000) // set the time here in milliseconds    
})
});

另外，我想把$(document).ready改成javascript。它是有效的替代品吗？

document.addEventListener("DOMContentLoaded", function() { 
  //code
});

Answer 1

你不需要使用 $(document).ready in vanilla / pure javascript.
将上面实现的相同逻辑移植到 js 中会是这样的：

HTML

<button click=handleClick(e)>click me </button>

JS

const handleClick = (e) => {
// To prevent event bubbling
e.preventDefault();
window.location.href = e.currentTarget.href

}

Answer 2

例如，像下面这样的东西，你只需要closeNav();函数。

document.querySelector(".link").addEventListener("click", function(e)  { 
  e.preventDefault();
  console.log(e.target.href)
  //closeNav();
  setTimeout(() => {
    const nextPage = e.target.href;
    window.location.href = nextPage;
  }, 2000)  
});

<div class=".menu-mobile ">
  <a class="link" href="https://www.google.com/">link</a>
</div>

Answer 3

您是否要求使用 vanilla JS 编写 jQuery 代码？如果是：

document.addEventListener("DOMContentLoaded", function() { 
document.querySelector('.menu-mobile a').addEventListener("click", function(e) {
  e.preventDefault(); 
  closeNav();

  setTimeout(() => {
    const nextPage = e.currentTarget.href;
    window.location.href = nextPage;
  }, 1000); // set the time here in milliseconds    
});
});

我用了querySelector and addEventListener

如何在重定向到网站部分之前关闭菜单

How to make menu close before redirecting to website section

html

javascript

css

domcontentloaded

HTML

JS