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.
//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>