1

una consulta por favor, estoy notando que cuando clickeo en las lineas(hamburguesa) del menú , tengo que clickear dos veces debido a que me parece que se esta inicializando las constantes burger,nav,navlinks y también ocurre cuando quiero cerrar el menú ( toma forma de X ) y tengo que clickear dos veces y cierra , esta visualización ocurre cuando esta en vista pequeña para móviles, he intentado colocarlo fuera de la función las constantes pero me sale error , en resumen tengo que clickear dos veces para abrir o cerrar el menú, por el momento visualizo con un console.log que imprime en esas constantes.

Como se ve en las imágenes estoy usando javascript función en un archivo.js que usa React , bueno no se si lo expreso bien pero es una buena forma de escribir el código asi ? disculpen soy algo nuevo en React, gracias.

  function navSlide() {
        const burger = document.querySelector(".burger");
        
        const nav = document.querySelector("#menu .nav-links");
        const navLinks = document.querySelectorAll("#menu .nav-links li");
        console.log(navLinks);
        burger.addEventListener("click", () => {
            //Toggle Nav
            nav.classList.toggle("nav-active");

            //Animate Links
            navLinks.forEach((link, index) => {
                if (link.style.animation) {
                    link.style.animation = ""
                    document.documentElement.style.overflow = 'auto';  // firefox, chrome
                    document.body.scroll = "yes"; // ie only
                } else {
                    link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
                    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
                    document.body.scroll = "no"; // ie only
                }
            });
            //Burger Animation
            burger.classList.toggle("toggle");
        });



    }

   <div  className="burger" onClick={navSlide} >
                    <div className="line1"></div>
                    <div className="line2"></div>
                    <div className="line3"></div>
                </div>
                <br></br>

                <nav id="menu">

                    <ul className="nav-links">
                        <li>
                            <a href="#home">Home</a>
                        </li>
                        <li>
                            <a href="#research">Research Institute Projects</a>
                        </li>
                        <li>
                            <a href="#press">Press</a>
                        </li>
                        <li>
                            <a href="#volunteer">Volunteer</a>
                        </li>
                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                        <li>
                            <a className="elipse" href="#donate">Donate</a>
                        </li>

                    </ul>

                    <br></br>
                    <br></br>
                </nav>

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

0

1 respuesta 1

1

Tu enfoque está un poco mal, en ReactJS no se recomienda ir directamente al DOM, es posible que por esto tengas comportamientos no deseados, tu caso puede estar ahí. Por otro lado noto que dentro de la función defines un Listener, que se activa después de que hagas clic una vez. Eso explica el porqué tienes que hacer 2 clics para que funcione. Esto debería funcionar:

function navSlide() {
    const burger = document.querySelector(".burger");
    
    const nav = document.querySelector("#menu .nav-links");
    const navLinks = document.querySelectorAll("#menu .nav-links li");
    console.log(navLinks);
        //Toggle Nav
        nav.classList.toggle("nav-active");

        //Animate Links
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = ""
                document.documentElement.style.overflow = 'auto';  // firefox, chrome
                document.body.scroll = "yes"; // ie only
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
                document.documentElement.style.overflow = 'hidden';  // firefox, chrome
                document.body.scroll = "no"; // ie only
            }
        });
        //Burger Animation
        burger.classList.toggle("toggle");


}

Ahora debería funcionar, pero no es el enfoque correcto. Te recomiendo revisar un poco la documentación

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.