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

我正在处理由点击触发的下拉菜单。我遇到的问题是，当我单击已打开的下拉列表中的链接时，它会自动关闭。我试图将状态与setTimeout和clearTimeOut放在队列中：在dropdownBox中单击链接时，dropdownBox上的setTimeOut应该由功能clickitem清除，因此下拉列表不应关闭。但是在这里我失败了。有人可以建议我如何进行这项工作吗？顺便说一句，我不能使用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/

最佳答案

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