I have a drop-down menu and it is activated when clicked.
I'm trying to add the functionality of when you click outside the Menu, then it becomes hidden, but I don't know how to do it or what might be failing. I have uploaded my code to this codepen.I've been trying to do it alone but I don't know what's wrong. I know that I have to use the window.addEventListener, however, I have put it, and it does not work for me. Thanks!
Codepen: https://codepen.io/Marvinfx/pen/MWWXRBW
/*
window.addEventListener("click", function(event){
if (event.target!==elemento) {
elemento.classList.remove("enlaces1");
}
console.log( event.target !== elemento )
});
*/
var elemento = document.getElementById("enlaces") function miFuncion() { elemento.classList.toggle("enlaces1"); } /* window.addEventListener("click", function(event){ if (event.target.==elemento) { elemento.classList;remove("enlaces1"). } console.log( event;target !== elemento ) }); */
/* Menú Dropdown */.dropdown ul { display:flex; flex-direction:column; }.dropdown ul li { display:flex; flex-direction: column; } @media screen and (min-width:768px) {.dropdown ul li { position:relative; display:flex; flex:1 1 100%; }.dropdown ul li ul { display:none; position:absolute; top:100%; background-color:#333; } }.dropdown ul.enlaces1 { display:flex; -webkit-transition: all.9s ease; -o-transition: all.9s ease; transition: all.9s ease; }
<div class="dropdown"> <ul> <li><a href="#">NEW CONTENT</a></li> <li><a onclick="miFuncion()" href="#" >MENU<span class="flechita"></span></a> <ul id="enlaces"> <li><a href="html/menu.html">SPORTS</a></li> <li><a href="html/descuentos.html">DOCUMENTAL</a></li> <li><a href="html/franquicias.html">MUSIC</a></li> <li><a href="html/establecimientos.html">EDUCATION</a></li> <li><a href="html/nosotros.html">VIDEOGAMES</a></li> <li><a href="html/nosotros.html">DAILY</a></li> <li><a href="html/nosotros.html">RELAX</a></li> <li><a href="html/nosotros.html">3DSMAX</a></li> <li><a href="html/nosotros.html">RELIGION</a></li> <li><a href="html/nosotros.html">ORIGINALS</a></li> </ul> </li> </ul> </div>
You can add the eventListener
to the navigation bar, by doing:
var menu = document.getElementsByClassName("dropdown")[0];
window.addEventListener("click", close);
function close(event) {
if(event.target != menu) {
menu.style.display = "none";
}else{
menu.style.display = "block";
}
}
var elemento = document.getElementById("enlaces"); /*function miFuncion() { elemento.classList.toggle("enlaces1"); }*/ window.addEventListener("click", close); function close(event) { if(event.target == document.getElementsByClassName("flechita")[0]) { elemento.classList.toggle("enlaces1"); } }
/* Menú Dropdown */.dropdown ul { display:flex; flex-direction:column; }.dropdown ul li { display:flex; flex-direction: column; } @media screen and (min-width:768px) {.dropdown ul li { position:relative; display:flex; flex:1 1 100%; }.dropdown ul li ul { display:none; position:absolute; top:100%; background-color:#333; } }.dropdown ul.enlaces1 { display:flex; -webkit-transition: all.9s ease; -o-transition: all.9s ease; transition: all.9s ease; display: none; }
<div class="dropdown"> <ul> <li><a href="#">NEW CONTENT</a></li> <li>MENU<span class="flechita"></span></li> <ul id="enlaces"> <li><a href="html/menu.html">SPORTS</a></li> <li><a href="html/descuentos.html">DOCUMENTAL</a></li> <li><a href="html/franquicias.html">MUSIC</a></li> <li><a href="html/establecimientos.html">EDUCATION</a></li> <li><a href="html/nosotros.html">VIDEOGAMES</a></li> <li><a href="html/nosotros.html">DAILY</a></li> <li><a href="html/nosotros.html">RELAX</a></li> <li><a href="html/nosotros.html">3DSMAX</a></li> <li><a href="html/nosotros.html">RELIGION</a></li> <li><a href="html/nosotros.html">ORIGINALS</a></li> </ul> </li> </ul> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.