0

tengo un pequeño problema, al ejecutar el evento abrir, funciona correctamente, pero al ejecutar el evento cerrar, lo ejecuta, pero inmediatamente ejecuta tambien el evento abrir, por lo que mi web queda como si no se ubiese ejecutado el evento cerrar, no me doy cuenta que esta mal en la logica, agradezco cualquier ayuda.introducir la descripción de la imagen aquí

//JAVASCRIPT

// BOTON PARA CERRAR MENU RESPONSIVE (LISTAS)

let botonCerrarMenu = document.getElementById('xClose');
let menuResponsive = document.getElementById('menu-listas-responsive');
let botonAbrirMenu = document.getElementById('barras-menu');

//EVENTO ABRIR
botonAbrirMenu.addEventListener('click',function open(){
    menuResponsive.style.display = "block"
    console.log("abrir")
})
//EVENTO CERRAR
botonCerrarMenu.addEventListener('click',function close(){
    menuResponsive.style.display = "none"
    console.log("cerrar")
})

//HTML
<div class="menu-container-responsive" id="responsive-container arriba" >
    <div class="logo-responsive">
        <a href="main.php" class="logo-a-responsive"><img src="Imagenes/Logo sisgran.png" alt="" id="logo-img-responsive"></a>
    </div>
    <div class="menu-responsive" id="menu-responsive">
        <i class="bars fas fa-bars" id="barras-menu">
            <ul id="menu-listas-responsive">
                <a href="main.php">
                    <li>Inicio</li>
                </a>
                <a href="Catalogo.php">
                    <li>Catalogo</li>
                </a>
                <a href="Nosotros.php">
                    <li>Nosotros</li>
                </a>
                <a href="Contacto.php">
                    <li>Contacto</li>
                </a>
                <a href="Login/Login.php">
                    <li>Iniciar Sesion</li>
                </a>
                <i class="far fa-times-circle" id="xClose"></i>
            </ul>
        </i>
6
  • Agrega tu código de html, para tener más clara la situación
    – Sr1871
    Commented el 6 oct. 2022 a las 20:36
  • ya lo agrego amigo Commented el 6 oct. 2022 a las 20:38
  • creo q tiene que ver con la delegacion de eventos, como xClose esta dentro de barras-menu, al darle click, se ejecutan los 2, prueba definir el target directamente
    – Carlos
    Commented el 6 oct. 2022 a las 22:44
  • @Carlos como definir directamente?¿ No comprendo esa parte Commented el 6 oct. 2022 a las 22:55
  • Por la delegación de eventos Si vos pones un document.addEventListener, todo el documento queda "a la espera" del listener, luego con el e.target en el if, definis a q target aplicar que acción cuando ocurre el evento
    – Carlos
    Commented el 8 oct. 2022 a las 16:08

1 respuesta 1

0

Tu HTML está mal, la etiqueta <i class="bars fas fa-bars" id="barras-menu"></i> deberia cerrarse inmediatamente. Además tienes la etiqueta <ul> seguidas de <a> cuando deberia seguirle <li>

let botonCerrarMenu = document.getElementById('xClose');
let menuResponsive = document.getElementById('menu-responsive');
let botonAbrirMenu = document.getElementById('barras-menu');

//EVENTO ABRIR
botonAbrirMenu.addEventListener('click', function open() {
    menuResponsive.style.display = "block"
    console.log("abrir")
})
//EVENTO CERRAR
botonCerrarMenu.addEventListener('click', function close() {
    menuResponsive.style.display = "none"
    console.log("cerrar")
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="menu-container-responsive" id="responsive-container arriba">
    <div class="logo-responsive">
        <a href="main.php" class="logo-a-responsive"><img src="Imagenes/Logo sisgran.png" alt="" id="logo-img-responsive"></a>
    </div>
    <i class="bars fas fa-bars" id="barras-menu"></i>
    <div class="menu-responsive" id="menu-responsive">
        <ul id="menu-listas-responsive">
            <li><a href="main.php">Inicio</a></li>
            <li><a href="Catalogo.php">Catalogo</a></li>
            <li><a href="Nosotros.php">Nosotros</a></li>
            <li><a href="Contacto.php">Contacto</a></li>
            <li><a href="Login/Login.php">Iniciar Sesion</a></li>

        </ul>
        <i class="far fa-times-circle" id="xClose"></i>
    </div>
</div>

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.