事件正在运行，但类没有对事件做出反应

Question

在我的网站中，当您单击某个元素时，会在上方打开一个导航列表。当用户单击页面（主体）的其他部分、滚动页面（主体）以及再次单击名为“Produtos”的元素时，此列表将关闭。

我做了身体部分，但最后一个不起作用！

let listaProdutos = document.querySelector(".lista-produtos");
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");
    }
  }
});

.visivel {
  display: block;
}

.invisivel {
  display: none;
}

<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>

当监听器正在监听“produtos”中的点击时，警报运行良好，但简单地清理导航列表的类不起作用！

仅当用户滚动或单击正文时，列表才会消失。

Answer 1

这里要做的第一件事是修复无效的 HTML。

<ul>

或

<ol>

可能没有

div

孩子。

div

必须存在于

<li>

中。

接下来，简化：

• 您不需要一个 CSS 类来隐藏某些内容并显示另一个 CSS 类 某物。当你想要隐藏东西时，你只需要一个 要看到某些东西，只需删除隐藏它的那个即可。
• 不确定媒体查询与此有何关系，但了解基本信息 代码首先工作，然后您可以添加其他要求。

最后，避免在事件处理程序内设置事件处理程序。这很容易造成多个事件处理程序“堆叠”在一起的问题。

请参阅下面的代码和注释：

const listaProdutos = document.querySelector(".lista-produtos");
const checkBoxProdutos = document.querySelector("#menu");
const produtos = document.getElementById("link-produtos");

checkBoxProdutos.addEventListener("click", function () {
    // You don't need to explicitly make something visible.
    // Just remove the CSS that was making it invisible.
    // You also don't need to check for whether to hide or show it.
    // Just toggle the use of the class that is hiding it.
    listaProdutos.classList.toggle("invisivel");
});

// Set up handlers for clicks outside of the list and scrolling
document.addEventListener("click", function(){hideList(event)});
document.addEventListener("mousewheel", function(){hideList(event)});

function hideList(evt) {
  // If the clicked element isn't a descendant of a <ul>...
  if(!evt.target.closest("ul")){
    listaProdutos.classList.add("invisivel");   // Hide the list
    checkBoxProdutos.checked = false;           // Reset the checkbox    
  }
}

.invisivel {
  display: none;
}

<div class="cabecalho-lista">
  <ul class="cabecalho__lista">
    <li class="cabecalho__item">
      <a class="cabecalho__item__link" href="index.html">Home</a>
    </li>
    <li class="cabecalho__item cabecalho__item__produtos">
      <div class="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>
      </div>
    </li>
    <li class="cabecalho__item">
      <a class="cabecalho__item__link" href="contato.html">FAQ</a>
    </li>
  </ul>
</div>