Question

我正在处理点击触发的下拉菜单。我遇到的问题是当我点击已经打开的下拉列表中的链接时，它会自动关闭下拉列表。我正在尝试使用setTimeout和clearTimeOut对状态进行排队：当dropdownBox中的链接被点击时，dropdownBox上的setTimeOut应该被函数clickitem清除，因此下拉列表不应该是＆＃39 ;关闭。但在这里，我失败了。有人可以建议我怎么做这个工作？顺便说一句，我不能使用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

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

Answer 2

这是我解决它的方式：当对话框在焦点上时我需要监听（当用户是fx时，它在焦点上。点击链接）。所以我添加了dropdownBox.addEventListener('focusin', clickitem, true);完整代码：

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

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

var timeOut;

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

    function clickitem() {
        clearTimeout(timeOut);
} 


trigger.addEventListener('click', handleClick);
dropdownBox.addEventListener('focusout', handleClickOut, true);
dropdownBox.addEventListener('focusin', clickitem, true);

单击链接内部时关闭下拉列表

2 个答案: