[SOLUCIONADO] Menu desplegable (dropdown)

[ILuzbel]

Hola foreros, tengo un problema, quisiera hacer un menu como este, pero con mas dropdowns, no solo con uno y bueno seria cómodo que se hiciera una sola función para todos. Para eso pensé en hacer que cuando presionen el botón se seleccione el elemento adyacente a este y que lo muestre, solo que no logro seleccionar el elemento adyacente...
Este es mi código:

Código HTML:

<ul class="w3-navbar">
                    <li class="dropdown-lang w3-dropdown">
                        <a class="dropdown-toogle" href="#">Italiano <i class="fa fa-angle-down" style="margin: 0 2px;"></i></a>
                        <div class="w3-dropdown-content">
                            <a href="#"><i class="icon-user-plus"></i> English</a>
                        </div>
                    </li>
                    <li class="dropdown-notifications w3-dropdown">
                        <a class="dropdown-toogle" href="#"><i class="icon-bubbles4"></i></a>
                        <div class="w3-dropdown-content">
                            <a href="#"><i class="icon-user-plus"></i> Mensajes</a>
                        </div>
                    </li>
                    <li class="dropdown-notifications w3-dropdown">
                        <a class="dropdown-toogle" href="#"><i class="icon-bubbles"></i></a>
                        <div class="w3-dropdown-content">
                            <a href="#"><i class="icon-user-plus"></i> Mensajes</a>
                        </div>
                    </li>
                </ul>
 

Código Javascript:

function toogleNav(e) {
    "use strict";
    //bloqueamos el evento por defecto
    e.preventDefault();
    
    //Aqui me paro :/
    
}
 
 
function startEvents() {
    "use strict";
    
    var i, btns;
    
    btns = document.getElementsByClassName("dropdown-toogle");
    
    /*jslint plusplus: true */ //Para aceptar ++
    for (i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', toogleNav, false);
    }
}
 
window.addEventListener('load', startEvents, false);
 

Se puede hacer de esta forma? porque como alternativa pensaba agregar ids a los elementos que se tienen que visualizar y agregar en un atributo de cada boton el id del elemento que quiero visualizar.

Gracias de antemano

Saludos...

[IsaBelM]

el problema te lo creas tu solo al usar el elemento <a> en un contexto en el que no tiene sentido. el evento deberías de asignarselo al elemento <li>. pero si aún así quieres mantenerlo, puedes usar el https://developer.mozilla.org/es/doc...ElementSibling

[ILuzbel]

Iniciado por IsaBelM

el problema te lo creas tu solo al usar el elemento <a> en un contexto en el que no tiene sentido. el evento deberías de asignarselo al elemento <li>. pero si aún así quieres mantenerlo, puedes usar el https://developer.mozilla.org/es/doc...ElementSibling

Bueno tal vez elegí el problema por ser mas complicado.
Ya he resuelto el problema, pero lo haré como dices para no escribir código de mas. Aquí esta la solución:

Código Javascript:

function dropdownNav(e) {
    "use strict";
    //bloqueamos el evento por defecto
    e.preventDefault();
    //definimos variables
    var i, j, c, e, cName;
    //Nombre de la clase del elemento que hay que ocultar
    cName = "w3-dropdown-content";
    //Obtenemos a los hijos del elemento padre
    c = this.parentNode.childNodes;
    //Seleccionamos elementos parecidos que hay que ocultar
    e = document.getElementsByClassName(cName);
    /*jslint plusplus: true */
    for (i = 0; i < c.length; i++) {
        //Seleccionamos el elemento que nos interesa 
        if (c[i].nodeName === "DIV") {
            //Mostramos o ocultamos el elemento
            if (c[i].className.indexOf("w3-show") == -1) {
                //Ocultamos todo
                for (j = 0; j < e.length; j++) {
                    e[j].className = e[j].className.replace(" w3-show", "");
                }
                //Mostramos el elemento interesado
                c[i].className += " w3-show";
            } else {
                //Ocultamos todo
                for (j = 0; j < e.length; j++) {
                    e[j].className = e[j].className.replace(" w3-show", "");
                }
            }
        }
    }
}
 

Gracias

Saludos...