JS, click event and class

In my website, when you click in a tag , an nav list open just above. This list closes when the user click in another part of the page (body), scroll the page (body) and when clicks again in the tag named “Produtos”.

I did 2 topics but i am with a problem with de last one

HTML:

  <div class="cabecalho-lista">
        <ul class="cabecalho__lista">
          <li class="cabecalho__item">
            <a class="cabecalho__item__link" href="index.html">Home</a>
          </li>
          <div class="cabecalho__item-produtos">
            <li class="cabecalho__item cabecalho__item__produtos">
              <input class="produtos-celular" type="checkbox" id="menu" />
              <label for="menu">
                <a
                  class="cabecalho__item__link"
                  id="link-produtos"
                  href="produtos.html"
                  >Produtos</a
                >
              </label>

              <ul class="lista-produtos invisivel">
                <li class="lista-produtos__item">
                  <a href="produtos.html#ignite">Linha Ignite</a>
                </li>
                <li class="lista-produtos__item">
                  <a href="produtos.html#elfbar">Linha Elfbar</a>
                </li>
                <li class="lista-produtos__item">
                  <a href="produtos.html#oxbar">Linha Oxbar</a>
                </li>
                <li class="lista-produtos__item">
                  <a href="produtos.html#lost">Linha Lost Mary</a>
                </li>
              </ul>
            </li>
          </div>
          <li class="cabecalho__item">
            <a class="cabecalho__item__link" href="contato.html">FAQ</a>
          </li>
        </ul>
      </div>

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");
    }
  }
});

I tried with the else, thats recognizes when the check input changes but doesnt work, so i did an click listener in the tag. Just the alert works.
In the case of the else, even the alert doesnt work