Hace unos días pedí ayuda con un menú desplegable que estoy haciendo que muestra sus submenús por medio de clicks en lugar de usar hover.
La anterior pregunta que hice me la contestaron, pero me surgió un nuevo problema y como no tengo casi conocimiento en javascript y jquery se me esta dificultando un poco.
Lo que quiero es que al hacer click en la opcion que dice "Hola" que pongo en mi ejemplo el menú se cierre, para que no quede el desplegado después de hacer click en el enlace.
No estaba seguro si crear un nuevo post para hacer esta nueva pregunta o editar este mismo, hice lo segundo, ojala alguien pueda ayudarme se lo voy a agradecer muchisimo.
var menu = $('.dropdown li a')
$('.dropdown li a').on("click", function(e) {
e.stopPropagation();
let current = $(this).next('ul');
$(this).closest('ul').find('ul').each((index, item) => {
if($(item)[0] != $(current)[0]) {
$(item).hide();
}
});
current.toggle();
});
$(document).on("click", function(e){
if(!menu.is(e.target) && !menu.has(e.target).length){
menu.next('ul').hide();
}
});
*{margin:0; padding:0; outline:0; box-sizing:border-box;}
.dropdown{background:#333; display:block; height:28px;}
.dropdown li{position:relative; float:left; list-style:none; white-space:nowrap; background:#34353a;}
.dropdown li a{display:block; height:28px; line-height:28px; padding:0 8px; text-decoration:none; color:#ccc;}
.dropdown ul{position:absolute; display:none;}
.dropdown li ul ul{left:100%; top:0;}
.dropdown li ul li{float:none;}
.dropdown img{margin-right:5px; position:relative; top:2px;}
.dropdown li:hover{background:#2e4e89;}
.dropdown li a:hover{color:#eee;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Opcion 1 ></a>
<ul>
<li><a href="#">Opcion 4</a></li>
<li><a href="#">Opcion 5 ></a>
<ul>
<li><a href="#">Opcion 7</a></li>
</ul>
</li>
<li><a href="#">Opcion 6 ></a>
<ul>
<li><a href="#">Opcion 8</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Opcion 2</a></li>
<li><a href="#hola">Hola</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Opcion 1</a></li>
<li><a href="#">Opcion 2</a></li>
</ul>
</li>
</ul>
<h1 id="hola" style="margin-top:500px; padding:100px;">Hola</h1>