[SOLUCIONADO] Dropdown menu por click en Jquery

[mardojai]

Hola amigos, y gracias de antemano.

Este es mi mi código html

Código HTML:

<nav id="nav">
    <ul class="menu">
        <li><a href="#">Link uno</a></li>
        <li><a href="#">Link dos</a></li>    
        <li><a href="#">Link tres drop</a>
            <ul>
                <li><a href="#">Link uno</a></li>
                 <li><a href="#">Link dos</a></li>  
            </ul>
        </li>
        <li><a href="#">Link cuatro</a></li>    
        <li><a href="#">Link Cinco con drop</a>
            <ul>
                <li><a href="#">Link uno</a></li>
                 <li><a href="#">Link dos</a></li>  
            </ul>  
        </li>
        <li><a href="#">link uno</a></li>
     </ul>
</nav> 

Ya tengo un dropdown en Css con hover.

Lo que quiero es que los hijos se muestren cuando le den click al "li" que los contiene y que al estar uno abierto, si el usuario decide abrir otro, el ya abierto se cierre. Espero que entiendan. Saludos.

[fede5426]

Tan simple como esto :)

http://codepen.io/anon/pen/YPBqrZ

Código HTML:

nav id="nav">
    <ul class="menu">
        <li><a href="#">Link uno</a></li>
        <li><a href="#">Link dos</a></li>    
        <li><a href="#" id="link3">Link tres drop</a>
            <ul id="drop3">
                <li><a href="#">Link uno</a></li>
                 <li><a href="#">Link dos</a></li>  
            </ul>
        </li>
        <li><a href="#">Link cuatro</a></li>    
        <li><a href="#" id="link5">Link Cinco con drop</a>
            <ul id="drop5">
                <li><a href="#">Link uno</a></li>
                 <li><a href="#">Link dos</a></li>  
            </ul>  
        </li>
        <li><a href="#">link uno</a></li>
     </ul>
</nav>
 

Código CSS:

#drop3,
#drop5{
  display:none;
}
 

Código Javascript:

$("#link3").click(function(){
  
  $("#drop3").slideToggle();  //Hace que cada vez q clickees, si esta cerrado se despliega y si esta desplegado se cierra. 
  $("#drop5").slideUp();  //cierra el otro submenu si esta abierto. 
  
});
 
$("#link5").click(function(){
  
  $("#drop5").slideToggle(); 
  $("#drop3").slideUp();
  
});
 

[ZoroRoronoa]

@fede5426

Que sucederia si agrego 2 menus mas que quiero que se encondan?
Hay que crear otras 2 lineas en cada funcion, y 2 funciones mas por cada menu?

Usando 2 clases simplificamos todo esto.

1) Clase (Yo soy un link con funcion)
2) Clase (Yo estoy escondido, aparecere con el efecto Slide)

Te dejo este Ejemplo. Saludos.
http://codepen.io/kurosaki/pen/GgzqpX

PD: Por cierto, codepen.io, clickeando en la esquina izquierda de donde dice "JS"
Te permite seleccionar librerias, como la de jquery, sin necesidad de incrustarlas en el HTML

Saludos.

[fede5426]

No se me ocurria de que forma hacerlo con clases, todos los dias se aprende algo nuevo, gracias!

[mardojai]

Gracias por su respuestas,
Creo que la respuesta de @ZoroRoronoa se acerca más a lo que quiero ya que no quiero estar creando id's para cada menu.

Miren, tengo este script, el problema es que cuando se habre un "ul" y vas y abres otro, el anterior no se cierra.

Código:

<script>
    $(function() {
  $("#nav ul ul").addClass("hidden");
  $("#nav li").click(function(e) {
      e.preventDefault();
      $('ul:first',$(this)).toggleClass('hidden active');
    });
 });
</script>

Código:

.hidden {
    display: none;
}

.active {
    display: block;
}

Saludos!

[ZoroRoronoa]

@mardojai

Te refieres a que mi codigo "se acerca", pero tu fuerzas a buscar otra solucion que no sea la mia.

Usando ese codigo actual que tienes, llamas a la funcion al hacer click en los "li", que inclusive no tienen un "drop".

Asi que para ello, primero, debes de trabajar solamente con los "li", que si tengan un drop, dandole una clase para distinguirlos.

Despues al hacer click, debes agregarle una nueva clase o id para identificar que el drop ESTA ACTIVO.

Posteriormente al hacer click nuevamente detectas lo siguiente:

Si este "li" ya esta activo, lo desactivas eliminando la clase y OCULTAS el drop, ul, slide, (como quieras llamarle).
Si este "li" NO esta activo, es otro el que esta abierto, pues cierras el actual ACTIVO, le eliminas la clase, MUESTRAS el actual "li" clikeado y le agregas la clase ACTIVE.
ó Si este "li" simplemente no esta ACTIVO, y no existe ninguno abierto, a este le agregas la clase y lo MUESTRAS

No puedo dejarte otro ejemplo, Ya tienes uno valido y funcional a lo que requieres.

Saludos.

[mardojai]

Claro que no, tu código es perfecto y prefiero ya no perder más tiempo. Solo era que no soy muy experto en Jquery y preguntaba más por saber si había una manera para fusionar los códigos y no tener que usar clases.

Pero creo que me quedare con tu código tal cual. Saludos y gracias por la ayuda.