Problemas con menu - jQuery

[tonyweb]

Hola buenos días, este es mi primer post en este foro, y ya que por mas que busque no encuentro la solución.. a ver si vosotros me podéis ayudar.

Pues a ver, tengo el típico menú formado por <ul><li><ul><li>, pues todo bien hasta que me pongo con jQuery, que quiero darle efectos slideDown y slideUp para visualizar los submenús (abajo esta el código). El problema viene cuando hago click en un submenú (por ejemplo en HTML, CSS, Mallorca...etc) el cual me hacen un slideUp en el momento que yo no quiero...

El tema es que quiero hacer el efecto justo cuando se haga click encima del titulo de cada sección (INICIO, CATEGORIAS, USUARIO...). No se si me habréis entendido porque se que me explico bastante mal, pero yo lo intento.. jeje

Os dejo el código del menú y del jQuery que he hecho.

Código HTML:

 <ul class="UlMenu">
            <li style="list-style: url(style/img/home.png);">INICIO
                <ul>                   
                    <li>Quien soy?</li>
                    <li>Mallorca</li>
                </ul>
            </li>            
            <li style="list-style: url(style/img/cat.png);">CATEGORIAS
                <ul>                   
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>jQuery</li>
                    <li>PHP</li>
                </ul>
            </li>
            <li style="list-style: url(style/img/user.png);">USUARIO
                <ul>    
                    <form method="post" id="login" name="login" id="FrLogin">
                        <label>Nombre</label><input type="text" tabindex="0" name="nombre">
                        <label>Contrasenya</label><input type="text" tabindex="1" name="pass" />
                        <button type="submit" tabindex="2" name="submit" onclick="php/login.php">Entrar</button>
                    </form>
                </ul>            
            </li>            
        </ul> 

Código:

$(document).ready(function(){
    
    
    $(".UlMenu li:has(ul)").click(function(e){
        if ($(this).find('ul').css('display') == 'none'){
            $(this).find('ul').slideDown(500);
        } else {
            $(this).find('ul').slideUp(500);
        }
    });

})

[Naahuel]

Eso es porque si tenés una estructura así:

Código HTML:

<ul>
    <li ="opcion-principal">
        Opcion Principal
        <ul id="submenu">
            <li>Opcion Opcion</li>
            <li>Opcion Opcion</li>
            <li>Opcion Opcion</li>
        </ul>
    </li>
</ul>
 

Cuando hacés click en alguna "Opcion Opcion", técnicamente también estás haciendo click en "Opcion principal" pues este contiene a todas las "Opciones Opciones" dentro. ¿Comprende?

Lo que yo haría es utilizar <a> para envolver las opciones (además de que ayuda a simplificar una solución para tu problema, creo que también ayuda a la usabilidad de tu sitio). Entonces el HTML se vería así:

Código HTML:

<ul class="UlMenu">
<li style="list-style: url(style/img/home.png);">
    <a href="#">INICIO</a>
    <ul>                   
        <li>Quien soy?</li>
        <li>Mallorca</li>
    </ul>
</li>            
<li style="list-style: url(style/img/cat.png);">
    <a href="#">CATEGORIAS</a>
    <ul>                   
        <li><a href="http://www.google.com">HTML</a></li>
        <li>CSS</li>
        <li>jQuery</li>
        <li>PHP</li>
    </ul>
</li>
<li style="list-style: url(style/img/user.png);">
    <a href="#">USUARIO</a>
    <ul>    
        <form method="post" id="login" name="login" id="FrLogin">
            <label>Nombre</label><input type="text" tabindex="0" name="nombre">
            <label>Contrasenya</label><input type="text" tabindex="1" name="pass" />
            <button type="submit" tabindex="2" name="submit" onclick="php/login.php">Entrar</button>
        </form>
    </ul>            
</li>            
</ul>
 

Y tu jQuery, muy simplificado:

Código Javascript:

$(document).ready(function(){
     $(".UlMenu > li > a").click(function(e){
        e.preventDefault();
        $(this).siblings('ul').slideToggle(500);
    });
});
 

El método preventDefault() permite que al hacer click en los <a> de las categorías, estos no actúen como enlaces corrientes. Notá que estoy usando el selector ".UlMenu > li > a" de forma de que el script no aftecte los <a> dentro de los submenus.

Espero te sirva, un saludo.

[JavierB]

Hola, tonyweb

Muevo tu tema al foro de Frameworks y Plugins Javascript desde Javascript.

Saludos,

[tonyweb]

Naahuel muchas gracias, lo he solucionado.
He estado mirando lo que hace siblings y slideToggle y la verdad que no sabia de ellas aun... Hará 2 semanitas que empece con jquery y estoy lo que se dice verde

Mirando el lado positivo me voi a dormir con buen sabor de boca. Gracias.

[JJHONSALEX0001]

cuando deseas un menu en flash avisame ami correo [email protected]