In my website, when you click in an element, an nav list open just above. This list closes when the user clicks in another part of the page (body), scroll the page (body) and when clicks again in the element named “Produtos”.
I did the body part and with the last one it isn’t working!
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>When the listener are listening click in “produtos”, the alert works well but the class that cleans the nav list simple doesnt work!
The list only disappear when the user scrool or click the body.
New contributor
user26579796 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
8
The first thing to do here is fix your invalid HTML. A <ul> or <ol> may not have div children. The div would have to exist within a <li>.
Next, simplify:
- You don’t need a CSS class to hide something and another one to show
something. You only need one for hiding things and when you want
something to be visible, just remove the one that hides it. - And since you’ll only have one class to control display, you can just
toggle it, rather than usingif/thento determine if it should be
displayed or not. - Not sure what the media query has to do with this, but get the basic
code working first and then you can add additional requirements.
Finally, avoid setting up event handlers within event handlers. This can easily create problems with multiple event handlers getting “stacked” up on top of each other.
See the code below and comments:
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
}
}/* You only need a class to hide things.
Just remove it when you want to show things. */
.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>1