我正在研究由点击触发的下拉菜单。我遇到的问题是,当我单击已打开的下拉列表中的链接时,下拉列表会自行关闭。我正在尝试使用 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);
最佳答案
这是因为您的链接
有href="#"
,所以当您点击它时,您将重定向到同一页面,但所有更新都会重置为它们的原始状态。
关于javascript - 单击内部链接时下拉菜单关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46091309/