我有几个下拉选择,我试图实现一个退出功能,点击任何地方的文件,使下拉列表将关闭。目前,它只关闭,如果你点击自己或另一个选择。
const selection = document.querySelectorAll('.selection-selected');
const optionContainer = document.querySelectorAll('.options-container');
function toggleSelection() {
const selectionToggle = this.getAttribute("aria-expanded");
for (i = 0; i < selection.length; i++) {
selection[i].setAttribute("aria-expanded", "false");
}
if (selectionToggle == "false") {
this.setAttribute("aria-expanded", "true");
}
}
selection.forEach(serviceItem => serviceItem.addEventListener("click", toggleSelection));
//Channel Selection
const channelSelection = document.querySelector('.channel');
const optionList = document.querySelectorAll('.channel-option');
optionList.forEach( o => {
o.addEventListener("click", () => {
channelSelection.innerHTML = o.querySelector("label").innerHTML;
channelSelection.setAttribute("aria-expanded", "false");
channelSelection.style.color = "#000";
})
})
for (i = 0; i < selection.length; i++) {
if(selection[i].ariaExpanded == "true") {
document.addEventListener('click', () => {
selection[i].setAttribute("aria-expanded", "false");
})
}
}
我试过这个,但它不工作,所以我正在寻找人谁可以建议我解决这个问题。谢谢你的帮助提前。
1条答案
按热度按时间rt4zxlrg1#
您可以使用
blur
或focusout
,因此当您退出或单击文档中的任何位置时,blur
或focusout
事件将为该元素触发,然后您可以激发该事件并关闭下拉列表。下面是一些示例。Link