Pregunta

Tengo una barra de navegación y quiero que uno de los elementos de la barra de navegación abra un menú desplegable al hacer clic.Tengo esto:

$("#dropdown_menuitem").click(function() {
    $(this).find('ul').slideToggle('slow');
});

Sin embargo, el menú desplegable nunca aparece al hacer clic, mi html se ve así:

<li id="dropdown_menuitem"><a href="#">MyAxon<img style="padding-left:5px;" src="img/drop-down.png"/></a>
    <ul class="dropdown reverse_gradient">
         <li class="dropdown"><a href="#">Teachers</a></li>
         <li class="lastElementInDropDown dropdown"><a href="#">Students</a></li>
    </ul>
</li>
.
.

Editar:Lo intenté alert($(this).find('ul').html()); y recibí una alerta con ambos <li> elementos.

$(this).find('ul').show(200); tampoco funcionó

El contenido no se agrega dinámicamente.

Mi CSS se ve así:

 nav.main_nav ul.dropdown{
     opacity: 0; 
     position: absolute; 
     top: 35px; 
     left: 10px;  
     border-bottom-right-radius: 10px; 
     -moz-border-bottom-right-radius: 10px;
     border-bottom-left-radius: 10px; 
     -moz-border-bottom-left-radius: 10px;
     display: none;
     z-index: 100;
  }

¿Algunas ideas?

¿Fue útil?

Solución 2

Encontré el problema, había puesto la opacidad en cero en mi hoja de estilo, lo que me impedía ver el menú desplegable.

Otros consejos

Bueno, primero que nada debes asegurarte de que lo que haces clic no es el enlace en sí.Aquí haces un clic incluso en el enlace. ¿Pero qué pasa si el usuario realmente hace clic en el enlace?Bueno, entonces serán redirigidos al href dentro del enlace.

Entonces, para evitarlo, debe agregar un evento de clic al enlace en sí:

$("#dropdown_menuitem a").click(function(e) {
    if($(this).parent().find('ul').length > 0) {
         e.preventDefault():;
    }
});

Esto comprobará si existe un menú desplegable en el li actual. Si es así, no redirigirá al usuario para interrumpir nuestra ejecución de JavaScript.Entonces lo que hacemos es prevenir el evento actual.Como la redirección.

Pruébalo y cuéntame si funcionó :)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top