Ver Mensaje Individual
  #2 (permalink)  
Antiguo 24/03/2011, 12:44
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 1 mes
Puntos: 192
Respuesta: Problemas con menu - jQuery

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

Código HTML:
Ver original
  1. <ul>
  2.     <li ="opcion-principal">
  3.         Opcion Principal
  4.         <ul id="submenu">
  5.             <li>Opcion Opcion</li>
  6.             <li>Opcion Opcion</li>
  7.             <li>Opcion Opcion</li>
  8.         </ul>
  9.     </li>
  10. </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:
Ver original
  1. <ul class="UlMenu">
  2. <li style="list-style: url(style/img/home.png);">
  3.     <a href="#">INICIO</a>
  4.     <ul>                  
  5.         <li>Quien soy?</li>
  6.         <li>Mallorca</li>
  7.     </ul>
  8. </li>            
  9. <li style="list-style: url(style/img/cat.png);">
  10.     <a href="#">CATEGORIAS</a>
  11.     <ul>                  
  12.         <li><a href="http://www.google.com">HTML</a></li>
  13.         <li>CSS</li>
  14.         <li>jQuery</li>
  15.         <li>PHP</li>
  16.     </ul>
  17. </li>
  18. <li style="list-style: url(style/img/user.png);">
  19.     <a href="#">USUARIO</a>
  20.     <ul>    
  21.         <form method="post" id="login" name="login" id="FrLogin">
  22.             <label>Nombre</label><input type="text" tabindex="0" name="nombre">
  23.             <label>Contrasenya</label><input type="text" tabindex="1" name="pass" />
  24.             <button type="submit" tabindex="2" name="submit" onclick="php/login.php">Entrar</button>
  25.         </form>
  26.     </ul>            
  27. </li>            
  28. </ul>

Y tu jQuery, muy simplificado:
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.      $(".UlMenu > li > a").click(function(e){
  3.         e.preventDefault();
  4.         $(this).siblings('ul').slideToggle(500);
  5.     });
  6. });

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.