JSFiddle - React, Tailwind, and code Playground

by hugosolar

HTML

<ul class="nav_page">
    <li><a href="#">Opción 1</a></li>
    <li>
        <a href="#">Opción 2</a>
        <ul class="children">
            <li><a href="#">Sub opción 1</a></li>
            <li><a href="#">Sub opción 2</a></li>
            <li><a href="#">Sub opción 3</a></li>
        </ul>
    </li>
    <li><a href="#">Opción 3</a></li>
    <li>
        <a href="#">Opción 4</a>
        <ul class="children">
            <li><a href="#">Sub opción 1</a></li>
            <li><a href="#">Sub opción 2</a></li>
            <li><a href="#">Sub opción 3</a></li>
        </ul>
    </li>
    <li><a href="#">Opción 5</a></li>
</ul>

CSS

.children { display: none; }

JavaScript

$("ul.nav_page > li > a").click(function(e){
    //asigno el objeto this a una variable, esto es mejor para optimizar un poco la velocidad de ejecución del codigo, porque solo se ejecuta la funcion de asignación de jquery una sola vez
    var obj = $(this);
    //valida es una validación monga que tenia el código para verificar que el link que estoy haciendo click tiene adyacente un submenu
    var valida = obj.parents("li").find(".children").length;     
    
    //Busco todos los elementos que tengan la clase ".children" y que esten dentro de un li y proceso cada uno de los encontrados
    $("ul li").find('.children').each(function(){
        //lo mismo de arriba pero en esta función
        var subObj = $(this);
        //subo cada elemendo encontrado, la funcion slideUp esconde el elemento subiendo el contenido de manera animada
        subObj.slideUp("fast");
        //remuevo la clase "active" a todos los links adyacentes a los submenus
        subObj.prev('a').removeClass('active');
        
    });
    //Si el submenu adyacente al cual estoy haciendo click está visible
    if (obj.next('ul').is(':visible')) {
        //entonces lo escondo animadamente
        obj.parents("li").find("ul").slideUp("fast");
    } else {
        //sino, lo muestro animadamente
        obj.parents("li").find("ul").slideDown("fast");
    }
    //si el link donde hice click (ver mas arriba donde se define "valida" tiene un submenu adyacente
    if ( valida > 0) {
        //asigno la clase "active" al link
        obj.addClass('active');
        //detengo la acción por defecto del link
        e.preventDefault();
    }
               
});