javascript - 单击内部链接时下拉菜单关闭

Question

我正在研究由点击触发的下拉菜单。我遇到的问题是，当我单击已打开的下拉列表中的链接时，下拉列表会自行关闭。我正在尝试使用 setTimeout 和clearTimeOut 对状态进行排队:当在 dropdownBox 中单击链接时，应通过函数 clickitem 清除 dropdownBox 上的 setTimeOut code>，因此下拉列表不应关闭。但在这里我失败了。有人可以建议我如何才能完成这项工作吗？顺便说一句，我不能使用 jquery，只能使用 Javascript。

const trigger = document.querySelector('.ul-catalogue > li > a');
const dropdownBox = document.querySelector('.nav > .ul-catalogue > li > .dropdown');
const link = document.querySelector(".dropdown > ul > li");

function handleClick() {
    dropdownBox.classList.add('trigger-click');
    setTimeout(() => dropdownBox.classList.add('trigger-click-active'), 150);
  dropdownBox.focus();
}

var timeOut;
function handleClickOut() {
    timeOut = setTimeout(() => dropdownBox.classList.remove('trigger-click', 'trigger-click-active'), 0);
}

function clickitem() {
clearTimeout(timeOut);
}  

trigger.addEventListener('click', handleClick);//This we do not touch
dropdownBox.addEventListener('blur', handleClickOut, true);
link.addEventListener('click', clickitem);

https://jsfiddle.net/zw9w8eg0/3/

Answer 1

这是因为您的链接有href="#"，所以当您点击它时，您将重定向到同一页面，但所有更新都会重置为它们的原始状态。