我用导航器检查了我的脚本,我找到了问题,但我无法解决这个问题。
当我点击我的元素时,他打开一个列表,如果在此下拉列表外单击(在document.body上)并再次点击此下拉列表我无法在列表中选择新值。我想这可能是我的目标。
let open = document.querySelectorAll('.sub-container div');
for (let loop = 0; loop < open.length; loop++) {
open[loop].addEventListener('click', () => {
let tabLi = {};
let list = open[loop].querySelectorAll('.tryit li')
let cross = open[loop].querySelector('h3 .clear-filters');
for (let l = 0; l < list.length; l++) {
list[l].addEventListener('click', (e) => {
e.stopPropagation();
if (!list[l].classList.contains('active-dropdown')) {
list[l].classList.add('active-dropdown');
tabLi[l] = list[l];
console.log(tabLi)
cross.style.display = 'block';
} else {
list[l].classList.remove('active-dropdown');
delete tabLi[l];
if (Object.keys(tabLi).length === 0) {
cross.style.display = 'none';
}
}
});
cross.addEventListener('click', (e) => {
e.stopPropagation()
list[l].classList.remove('active-dropdown');
delete tabLi[l];
cross.style.display = 'none';
})
}
})
}