Javascript Обнаружение события клика за пределами Меню (Vanilla JS) - PullRequest
Новая
       5

Javascript Обнаружение события клика за пределами Меню (Vanilla JS)

0 голосов
/ 10 ноября 2019

У меня есть раскрывающееся меню, и оно активируется при нажатии.

Я пытаюсь добавить функциональность, когда вы щелкаете за пределами меню, тогда оно становится скрытым, но я не знаю, как это сделать или что может быть неудачным. Я загрузил свой код в этот кодовый блок. Я пытался сделать это один, но я не знаю, что не так. Я знаю, что я должен использовать window.addEventListener, однако я поставил его, и он не работает для меня. Спасибо!

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>

1 Ответ

1 голос
/ 10 ноября 2019

Вы можете добавить eventListener на панель навигации, выполнив: 

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