Necesito un poco de ayuda con Jquery por favor.

Tengo esta cadena de código que activa mi menú desplegable que se muestra/oculta (visibilidad):

//toggle the menu items' visiblity
      .find('h2')
         .bind('click focus', function(){
            $(this).parent().toggleClass('expanded')
         });

Código tomado de: http://filamentgroup.com/examples/rwd-nav-patterns/

Sin embargo, quiero ser capaz de alternar el uso de Jquery (desea que la transición suave).

PREGUNTA:

¿Cómo puedo adaptar este código para obtener los slideToggle a trabajar?

He tratado de sustituir ‘toggleClass’ con ‘slideToggle’, que en una manera en que funciona, pero en lugar de alterna mi menú, lo escondido ‘h2’.

JSFiddle link: por Favor, cambiar el tamaño de la ventana ligeramente para @Consulta de Medios de comunicación para poner en.
Cuadro rojo en la esquina superior derecha) representa el menú desplegable.

http://jsfiddle.net/87G6a/

Todos los comentarios/respuestas son muy apreciadas y se votó hasta.

Gracias.

  • u puede publicar su html
  • la instalación de un violín con un intento. Esta es una tarea relativamente fácil, pero, no podemos menos que ver su código.
  • Gracias por la sugerencia. He subido un enlace a una versión reducida de mi sitio.
InformationsquelleAutor Alex | 2013-11-29

2 Comentarios

  1. 1

    Esto puede ser lo que usted está buscando.

    http://jsfiddle.net/defmetalhead/2ezsP/

    $('.mainMenu').children('li').on('click', function() {
       $(this).children('ul').slideToggle('slow'); 
    });

    Todo en lo que a código se puede hacer una diferente(mejor) manera. Sin embargo, marque esta actualizado el violín. http://jsfiddle.net/defmetalhead/87G6a/2/

     .find('h2')
        .bind('click focus', function () {
        $('ul').slideToggle('slow');
      });

    SER un poco más sean específicos en cuanto a lo que usted necesita.

    • Gracias por el ejemplo. Pero hay una manera de adaptar mi actual código para que funcione, sin alterar drásticamente el html estructura de navegación? He estado intentando pero no hubo suerte.
    • Hacer que la anchura de la ventana de resultado de la menor. Cambiar el tamaño de abajo. «h2» elemento debe aparecer como un cuadro rojo en la esquina superior derecha. Puede hacer clic en él para mostrar/ocultar el menú li.
    • compruebe el código actualizado
  2. -1
    $('nav ul li').hover(function(){
        $(this).find('.sub-menu li').slideToggle();
    });
    • Mientras que este código puede ser una solución para el problema que nos sería mejor si se agrega una explicación de lo que los códigos y de cómo se responde a la pregunta.

Dejar respuesta

Please enter your comment!
Please enter your name here