Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Dropdown menu por click en Jquery

Estas en el tema de Dropdown menu por click en Jquery en el foro de Jquery en Foros del Web. 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= ...
  #1 (permalink)  
Antiguo 23/03/2015, 21:18
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 11 años, 3 meses
Puntos: 44
Exclamación Dropdown menu por click en Jquery

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.
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.
  #2 (permalink)  
Antiguo 23/03/2015, 21:53
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 3 meses
Puntos: 208
Respuesta: Dropdown menu por click en Jquery

Tan simple como esto :)

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

Código HTML:
Ver original
  1. nav id="nav">
  2.     <ul class="menu">
  3.         <li><a href="#">Link uno</a></li>
  4.         <li><a href="#">Link dos</a></li>    
  5.         <li><a href="#" id="link3">Link tres drop</a>
  6.             <ul id="drop3">
  7.                 <li><a href="#">Link uno</a></li>
  8.                  <li><a href="#">Link dos</a></li>  
  9.             </ul>
  10.         </li>
  11.         <li><a href="#">Link cuatro</a></li>    
  12.         <li><a href="#" id="link5">Link Cinco con drop</a>
  13.             <ul id="drop5">
  14.                 <li><a href="#">Link uno</a></li>
  15.                  <li><a href="#">Link dos</a></li>  
  16.             </ul>  
  17.         </li>
  18.         <li><a href="#">link uno</a></li>
  19.      </ul>
  20. </nav>

Código CSS:
Ver original
  1. #drop3,
  2. #drop5{
  3.   display:none;
  4. }

Código Javascript:
Ver original
  1. $("#link3").click(function(){
  2.  
  3.   $("#drop3").slideToggle();  //Hace que cada vez q clickees, si esta cerrado se despliega y si esta desplegado se cierra.
  4.   $("#drop5").slideUp();  //cierra el otro submenu si esta abierto.
  5.  
  6. });
  7.  
  8. $("#link5").click(function(){
  9.  
  10.   $("#drop5").slideToggle();
  11.   $("#drop3").slideUp();
  12.  
  13. });

  #3 (permalink)  
Antiguo 24/03/2015, 00:24
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 824
Antigüedad: 13 años
Puntos: 116
Respuesta: Dropdown menu por click en Jquery

@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.
__________________
Programador jQuery & PHP
  #4 (permalink)  
Antiguo 24/03/2015, 07:26
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 3 meses
Puntos: 208
Respuesta: Dropdown menu por click en Jquery

No se me ocurria de que forma hacerlo con clases, todos los dias se aprende algo nuevo, gracias!
  #5 (permalink)  
Antiguo 24/03/2015, 07:29
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 11 años, 3 meses
Puntos: 44
Respuesta: Dropdown menu por click en Jquery

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!
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.
  #6 (permalink)  
Antiguo 24/03/2015, 11:43
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 824
Antigüedad: 13 años
Puntos: 116
Respuesta: Dropdown menu por click en Jquery

@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.
__________________
Programador jQuery & PHP
  #7 (permalink)  
Antiguo 24/03/2015, 12:10
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 11 años, 3 meses
Puntos: 44
Respuesta: Dropdown menu por click en Jquery

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.

__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.

Etiquetas: despegable, dropdown
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:52.