2

Mi problema es el siguiente: tengo un menu que contiene varias opciones () y quiero que al ubicar el cursor sobre algun div se despligue el contenido de dicho div, pero se despliega el contenido de los demas padre.

Los padre tienen una misma clase y los dentro de esos comparten otra clase.

Codigo HTML:

<button class="btn-plegable">
 <div class="submenu-gestor">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
    <a href="#">Item 4</a>
  </div>
</button>

<button class="btn-plegable">
  <div class="submenu-gestor">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
  </div>
</button>

(...)

Codigo JavaScript/JQuery:

<script>
    $(".btn-plegable").hover(function () {
       $(".submenu-gestor").stop().slideDown("slow");
    }, function(){
       $(".submenu-gestor").stop().slideUp("slow");
    });
</script>

1 respuesta 1

1

La solucion que encontre y resulta la mas optima es la siguiente:

<script>
    $(".btn-plegable").hover(function () {
       $(this).find(".submenu-gestor").stop(true, true).slideDown("slow");
    }, function(){
       $(this).find(".submenu-gestor").stop(true, true).slideUp("slow");
    });
</script>

Me faltaba apuntar al div sobre el que estaba con (this) y utilizar find para ubicar el hijo y hacer la animacion estilo acordeón.

Tambien se hace de stop() para evitar formar colas; todo dentro de las mismas lineas del anterior .

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.