JS, событие щелчка и класс ⇐ CSS

[Anonymous]

На моем веб-сайте, когда вы щелкаете по тегу, чуть выше открывается список навигации. Этот список закрывается, когда пользователь нажимает на другую часть страницы (тело), ​​прокручивает страницу (тело) и когда снова нажимает на тег с именем «Produtos».
Я сделал 2 темы но у меня проблема с последним
HTML:

Код: Выделить всё

[list]
[*]
[url=index.html]Home[/url]


[*]


[url=produtos.html]Produtos




Linha Ignite[/url]

[*]
[url=produtos.html#elfbar]Linha Elfbar[/url]

[*]
[url=produtos.html#oxbar]Linha Oxbar[/url]

[*]
[url=produtos.html#lost]Linha Lost Mary[/url]

[/list]


[*]
[url=contato.html]FAQ[/url]

CSS:

Код: Выделить всё

.visivel {
display: block;
}

.invisivel {
display: none;
}

JS:

Код: Выделить всё

let checkBoxProdutos = document.querySelector("#menu");
let produtos = document.getElementById("link-produtos");

checkBoxProdutos.addEventListener("change", function () {
x = window.matchMedia("(max-width: 849px)");
if (x.matches) {
if (this.checked) {
listaProdutos.classList.add("visivel");
listaProdutos.classList.remove("invisivel");

// Para fechar a lista:
let body = document.querySelector("body");
body.addEventListener("click", function () {
listaProdutos.classList.add("invisivel");
listaProdutos.classList.remove("visivel");
checkBoxProdutos.checked = true;
});
body.addEventListener("mousewheel", function () {
listaProdutos.classList.add("invisivel");
listaProdutos.classList.remove("visivel");
});

produtos.addEventListener("click", function () {
alert("ola");
listaProdutos.classList.add("invisivel");
listaProdutos.classList.remove("visivel");
});
} else {
listaProdutos.classList.add("invisivel");
listaProdutos.classList.remove("visivel");
}
}
});

Я попробовал использовать else, он распознает изменение входных данных проверки, но не работает, поэтому я добавил в тег прослушиватель кликов. Работает только оповещение.
В случае с остальным даже оповещение не работает

Подробнее здесь: https://stackoverflow.com/questions/789 ... -and-class