Duda al desplegar un menú

Checho360 · #1 (**permalink**) 30/08/2013, 19:31

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 originaladdEventListener ("load", probando);
 
function probando (){
    
    var nav1 = document.querySelectorAll("#barra_navegacion li");
    
    nav1[1].addEventListener ("mouseon", despliega( document.querySelectorAll("#barra_navegacion_prueba")[0] ));
    nav1[1].addEventListener ("mouseout", repliega( document.querySelectorAll("#barra_navegacion_prueba")[0] ));
    
    function despliega (elem){
        
       elem.style.visibility = "visible";
        
    }
    
    function repliega (elem){
        
        elem.style.visibility = "hidden";
        
    }
    
}

Código HTML:

Ver original<!DOCTYPE html>
 
<html lang="es">
    
    <head>
        
        <link rel="stylesheet" href="estilos.css">
        <script src="scripts.js"></script>
        <meta charset="utf-8">
        
    </head>
    
    <body>
        
        <div id="cajaPrincipal">
        
            <header id="encabezado">
 
                <span>Prueba de script</span>
 
            </header>
 
            <nav id="barra_navegacion">
 
              <ul>
                    
                    <li>Inicio</li>
                    <li>Galeria
                        
                        <div id="barra_navegacion_prueba">Galeria2</div>
                        
                        
                    </li>
                    <li>Contacto</li>
                    <li>Ubicacion</li>
                    <li>Clientes</li>
                    
                </ul>
 
            </nav>
 
            <section>
 
                <script>
 
 
 
                </script>
 
            </section>
            
        </div>
        
    </body>
    
</html>

Código CSS:

Ver original#cajaPrincipal{
    
    margin: auto;
    
}
 
#encabezado{
    
    display: block;
    width: auto;
    background: #BDBDBD;
    text-align: center;
    color: #000000;
    font-size: 30px;
    border: 1px solid #000000;
    border-radius: 5px;
    margin: 20px;
    
}
 
#barra_navegacion{
    
    color: #0101DF;
    border: 1px solid #000000;
    text-align: center;
    
}
 
#barra_navegacion li {
    
    display: inline-block;
 
}
 
#barra_navegacion_prueba{
    
    visibility: hidden;
 
}

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!!

Checho360 · #2 (**permalink**) 31/08/2013, 05:49

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 originaladdEventListener ("load", probando);
 
function probando (){
    
    var nav1 = document.querySelectorAll("#barra_navegacion li");
    
    nav1[1].addEventListener ("mouseon", despliega () );
    nav1[1].addEventListener ("mouseout", repliega () );
    
    function despliega (){
        
       document.querySelectorAll("#barra_navegacion_prueba")[0].style.visibility = "visible";
        
    }
    
    function repliega (){
        
        document.querySelectorAll("#barra_navegacion_prueba")[0].style.visibility = "hidden";
        
    }
    
}

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