Menú desplegable con JQuery

[manguiti]

Hola a todos, estoy aprendiendeo JQuery y quiero hacer un menú desplegable parecido al que hay en el lateral del panel de administración de wordpress. El caso es que consigo que aparezca y desaparezcan los submenu al ponerme sobre los ítems principales, pero si muevo rapido el ratón se apilan los efectos generando una especie de efecto acordeon, supongo que habrá algun metodo para o linea para que sólo ejecute un submenu en una sola vez o algo parecido, os paso el código y toda ayuda será bienvenida:

Código HTML:

<style type="text/css">
 
    #pagina{
        width=100%;
        margin: 0 auto;
        padding: 0px;
        background-color: #333;
        overflow: hidden;
    }
    #menu{
        position: relative;
        float: left;
        width: 20%;
        background-color: #892;
    }
    
    #marco{
        position: relative;
        float: left;
        margin-left: 20px;
        width: 70%;
        background-color:#729;
    }
 
    #menu ul{
        width: 220px;
        background-color: #333;
        list-style: none;
        display: block;
        padding: 0px;
        margin:0px;
    }
 
    #menu ul li{
        width: 200px;
        position: relative;
        float: left;
        background-color: #415;
        margin: 0px  2px 2px 0px;
        color:#fff;
    }
 
    #menu ul li ul{
        background-color: #138;
        width:200px;
        margin: 0px 0px 0px 0px;
        padding: 0px;
        display: none;
    }
 
    #menu ul li ul li{
        width:200px;
        background-color: #138;
        margin: 0px 0px 0px 0px;
        padding:5px 0px 5px 0px;
    }
    </style>
    <!-- JQuery -->
    <script type="text/javascript">
        $().ready(function(){
            
            //Cuando pasemos por encima, muestro el submenu.
            $('ul li').mouseover(function(){
                //alert('Coge el evento');
                $(this).children().each(function(e){
                    $(this).slideDown('slow');
                    return false;
                });
            }); 
 
            //Al quitar el raton de el, lo oculto
            $('ul li').mouseout(function(){
                $(this).children().each(function(e){
                    $(this).slideUp('slow');
                    return false;
                });
            });
        });
    </script>
 
<div id="menu">
            <h2>Menu</h2>
            <ul>
                <li>Noticias
                    <ul class="subMenu">
                        <li>Añadir Noticia</li>
                        <li>Todas las Noticias</li>
                        <li>Fuentes</li>
                        <li>Moderación</li>
                    </ul>
                </li>
                <li>Artículos
                    <ul class="subMenu">
                        <li>Añadir Artículo</li>
                        <li>Todos los Artículos</li>
                        <li>Colaboradores</li>
                        <li>Moderación</li>
                    </ul>
                </li>
 
                <li>Editoriales
                    <ul class="subMenu">
                        <li>Añadir Editorial</li>
                        <li>Todas las Editoriales</li>
                        <li>Moderación</li>
                    </ul>
                </li>
 
                <li>Actividades
                    <ul class="subMenu">
                        <li>Añadir Actividad</li>
                        <li>Todas las Actividades</li>
                    </ul>
                </li>
 
                <li>Webs de interés
                    <ul class="subMenu">
                        <li>Añadir Web de interés</li>
                        <li>Todas las Webs de interés</li>
                    </ul>
                </li>
 
                <li>Clientes
                    <ul class="subMenu">
                        <li>Añadir Cliente</li>
                        <li>Todos los Clientes</li>
                    </ul>
                </li>
 
                <li>Gestión Envíos
                    <ul class="subMenu">
                        <li>Crear Newsletter</li>
                        <li>Realizar envío</li>
                        <li>Todos los envíos</li>
                    </ul>
                </li>   
                    
                
            </ul>
        </div>
 

[Sirikon]

Código:

<script type="text/javascript">
        $().ready(function(){
		$('ul li').hover(function(){
		    $(this).children().each(function(e){
		        $(this).stop()
		        $(this).slideDown('slow');
		        return false;
                });
	}, function(){
		$(this).children().each(function(e){
		    $(this).stop()
                    $(this).slideUp('slow');
                    return false;
                });
	})
});
    </script>

He hecho un par de cosas:
Primero he sustituido el mouseover() y mouseout() por un hover().

Lo que hace hover() es que en un mismo evento tenemos dos eventos con sus respectivas funciones, en este caso el primer evento será cuando entre el ratón y el segundo cuando salga, esto es un añadido mio ya que el tener menos eventos que funcionen igual facilitan las cosas para mi gusto al menos.

Después he añadido antes de cada evento de animación un $(this).stop(), esto hace que la animación que esté ejecutándose en ese momento la pare y de paso a la animación que llamaremos a continuación.

He probado el código así y creo que soluciona el problema, de todas formas asegúrate y nos cuentas.

Saludos!

[manguiti]

Hola, gracias por responder, ya funciona bien y, efectivamente, en un principio lo tenía puesto con el evento hover(), pero fui haciendo cambios a ver si conseguía quitar ese efecto acordeón, aunque la verdad es que mi idea es hacerlo con el evento onclick, pero no me lo toma.... No se si es que tiene que tener otro tipo de elemento contenedor o ser un enlace... pero de momento no consigo que funcione....

Trataré de darle una vuelta más a ver si pillo el truco, ¿Alguna sugerencia en este sentido??

Gracias nuevamente ;)

[Sirikon]

Recuerda que en jQuery el evento onclick es el evento .click.

Si quieres que por ejemplo un div realice una función al hacer click sobre él:

Código:

$("div").click(function(){
    // La función que quieras
})

Y a demás, si tienes algo de manejo de inglés y quieres un tutorial muy bueno, puedes irte a http://www.codeschool.com/ que es una página web de cursos online en vídeo en ingles, hay uno de jQuery básico que se llama "jQuery First Flight" (Primer vuelo en jQuery), que es realmente interesante y te da una base muy buena.

Cualquier duda dila también por aquí por supuesto ^^ Saludos!