Foros del Web » Programando para Internet » Javascript »

Duda al desplegar un menú

Estas en el tema de Duda al desplegar un menú en el foro de Javascript en Foros del Web. Hola. Estoy empezando a meterme en el mundillo de html, css y javascript y estoy teniendo algún que otro problema xD. Ahora mismo en concreto, ...
  #1 (permalink)  
Antiguo 30/08/2013, 19:31
 
Fecha de Ingreso: marzo-2011
Mensajes: 94
Antigüedad: 13 años
Puntos: 3
Duda al desplegar un menú

Hola. Estoy empezando a meterme en el mundillo de html, css y javascript y estoy teniendo algún que otro problema xD. Ahora mismo en concreto, no entiendo por qué al pasar el ratón por encima de "Galeria", no muestra "Galeria2" y al quitarlo lo vuelve a ocultar (esa es mi intención por lo menos jaja). Os dejo el código para que le echéis un vistazo a ver si me podéis ayudar, espero que no esté muy caótico jaja. Un saludo y gracias!!!

Código Javascript:
Ver original
  1. addEventListener ("load", probando);
  2.  
  3. function probando (){
  4.    
  5.     var nav1 = document.querySelectorAll("#barra_navegacion li");
  6.    
  7.     nav1[1].addEventListener ("mouseon", despliega( document.querySelectorAll("#barra_navegacion_prueba")[0] ));
  8.     nav1[1].addEventListener ("mouseout", repliega( document.querySelectorAll("#barra_navegacion_prueba")[0] ));
  9.    
  10.     function despliega (elem){
  11.        
  12.        elem.style.visibility = "visible";
  13.        
  14.     }
  15.    
  16.     function repliega (elem){
  17.        
  18.         elem.style.visibility = "hidden";
  19.        
  20.     }
  21.    
  22. }

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.  
  3. <html lang="es">
  4.    
  5.     <head>
  6.        
  7.         <link rel="stylesheet" href="estilos.css">
  8.         <script src="scripts.js"></script>
  9.         <meta charset="utf-8">
  10.        
  11.     </head>
  12.    
  13.     <body>
  14.        
  15.         <div id="cajaPrincipal">
  16.        
  17.             <header id="encabezado">
  18.  
  19.                 <span>Prueba de script</span>
  20.  
  21.             </header>
  22.  
  23.             <nav id="barra_navegacion">
  24.  
  25.               <ul>
  26.                    
  27.                     <li>Inicio</li>
  28.                     <li>Galeria
  29.                        
  30.                         <div id="barra_navegacion_prueba">Galeria2</div>
  31.                        
  32.                        
  33.                     </li>
  34.                     <li>Contacto</li>
  35.                     <li>Ubicacion</li>
  36.                     <li>Clientes</li>
  37.                    
  38.                 </ul>
  39.  
  40.             </nav>
  41.  
  42.             <section>
  43.  
  44.                 <script>
  45.  
  46.  
  47.  
  48.                 </script>
  49.  
  50.             </section>
  51.            
  52.         </div>
  53.        
  54.     </body>
  55.    
  56. </html>

Código CSS:
Ver original
  1. #cajaPrincipal{
  2.    
  3.     margin: auto;
  4.    
  5. }
  6.  
  7. #encabezado{
  8.    
  9.     display: block;
  10.     width: auto;
  11.     background: #BDBDBD;
  12.     text-align: center;
  13.     color: #000000;
  14.     font-size: 30px;
  15.     border: 1px solid #000000;
  16.     border-radius: 5px;
  17.     margin: 20px;
  18.    
  19. }
  20.  
  21. #barra_navegacion{
  22.    
  23.     color: #0101DF;
  24.     border: 1px solid #000000;
  25.     text-align: center;
  26.    
  27. }
  28.  
  29. #barra_navegacion li {
  30.    
  31.     display: inline-block;
  32.  
  33. }
  34.  
  35. #barra_navegacion_prueba{
  36.    
  37.     visibility: hidden;
  38.  
  39. }

Mi intención es que tengo un menú compuesto por Inicio, Galeria... y Galeria2 que a priori está en hidden. Añado un event listener y cuando el ratón esté por encima de Galeria, entonces cambia el valor de Galeria2 a visible, pero cuando quito el ratón, lo detecta y lo vuelve a ocultar. No sé por qué pero el resultado es que lee la última instrucción como si el ratón lo tuviera siempre quitao y está siempre hidden.

Muchísimas gracias!!

Última edición por Checho360; 30/08/2013 a las 19:36
  #2 (permalink)  
Antiguo 31/08/2013, 05:49
 
Fecha de Ingreso: marzo-2011
Mensajes: 94
Antigüedad: 13 años
Puntos: 3
Respuesta: Duda al desplegar un menú

Bueno finalmente lo solucioné. Según entiendo yo, cada vez que se llama a la función querySelectorAll() es como si de alguna forma seleccionara el elemento o lo clickeara, por lo que llama a la función replegar o desplegar. Para solucionarlo simplemente llamo a la función dentro de la propio función desplegar o replegar, de manera que no cambia el valor antes de la acción.


De todo esto deduzco que no entiendo nada bien como funciona realmente ese método (querySelectorAll()), entonces si alguien me pudiera ayudar explicándolo y diciéndome como funciona realmente se lo agradecería.

Muchsimas gracias. El codigo que funciona sería:

Código Javascript:
Ver original
  1. addEventListener ("load", probando);
  2.  
  3. function probando (){
  4.    
  5.     var nav1 = document.querySelectorAll("#barra_navegacion li");
  6.    
  7.     nav1[1].addEventListener ("mouseon", despliega () );
  8.     nav1[1].addEventListener ("mouseout", repliega () );
  9.    
  10.     function despliega (){
  11.        
  12.        document.querySelectorAll("#barra_navegacion_prueba")[0].style.visibility = "visible";
  13.        
  14.     }
  15.    
  16.     function repliega (){
  17.        
  18.         document.querySelectorAll("#barra_navegacion_prueba")[0].style.visibility = "hidden";
  19.        
  20.     }
  21.    
  22. }

Es decir, si en vez de llamar a la función repliega y despliega sin argumentos y luego buscando el elemento que tenga el id barra_navegación_prueba dentro de ellas, llamo a las funciones pasandoles como argumento la búsqueda del id barra_navegacion_prueba (es decir busco fuera de esas funciones) ya no funciona.

No se si me explico muy bien... jaja saludos!!!!!!!!! y graciasss

Etiquetas: desplegar, html, js, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:50.