Cómo cerrar máscara

He creado un menú de hamburguesa que se abre con la máscara en el fondo (la máscara se abre después de 4ms). A continuación, al cerrar el menú de la hamburguesa, quiero que la máscara se cierre con él (medios después de 4ms). Pero en cambio, según mi código, mi máscara no se cierra después de que mi menú de hamburguesa se cierre.

JS:

const menuIcon = document.querySelector('.hamburger-menu');
const mainNav = document.querySelector('.main-nav');

menuIcon.addEventListener('click', () => {
    menuIcon.classList.toggle('change');
    mainNav.classList.toggle('change');

     setTimeout(() => {
      mask.setAttribute('style','display:block');
     }, 400);                                     /*Code working till here */
    
    if($('#mask').is(':visible')){
  
      console.log('mask is showing');
    
      menuIcon.addEventListener('click', () => {
        
        setTimeout(() => {
          mask.setAttribute('style','display:none');
         }, 400);
    
      });
    }
});

enter image description here

Sólo quiero que esa máscara desaparezca al cerrar el menú de la hamburguesa.

Por favor, cualquier ayuda sería apreciada.

Pregunta hecha hace 3 años, 4 meses, 28 días - Por codervoyager

3 Respuestas:

  • Como su código está escrito, en lugar de cerrar la máscara cuando la máscara está mostrando, usted está añadiendo un oyente adicional del evento que cierra la máscara. Usted debe ser capaz de arreglar esto sustituyendo el código en su declaración si con los siguientes:

    if($('#mask').is(':visible')){
  console.log('mask is showing');
    
  setTimeout(() => {
    mask.setAttribute('style','display:none');
  }, 400);
}

    Este código actualizado cierra directamente la máscara en lugar de añadir un oyente adicional para cerrar la máscara.

    Respondida el Dec 18, 2020 a las 02:47 - por nasean

    Votos positivos: 0 | Votos negativos: 0

  • El problema en tu código es que estás añadiendo un event listener dentro de otro event listener, lo cual puede causar un comportamiento inesperado. En lugar de hacerlo de esta forma, puedes modificar tu código de la siguiente manera para lograr que la máscara se cierre al mismo tiempo que se cierra el menú de hamburguesa:

    javascript
const menuIcon = document.querySelector('.hamburger-menu');
const mainNav = document.querySelector('.main-nav');
const mask = document.querySelector('mask');
menuIcon.addEventListener('click', () => {
    menuIcon.classList.toggle('change');
    mainNav.classList.toggle('change');

    if (mask.style.display === 'none') {
        mask.style.display = 'block';
    } else {
        mask.style.display = 'none';
    }
});

    Con este código, al hacer click en el icono de la hamburguesa, la máscara se mostrará si está oculta o se ocultará si ya está mostrada, al mismo tiempo que se abre o cierra el menú de hamburguesa. No es necesario utilizar setTimeout ni agregar múltiples event listeners para lograr este comportamiento.

    Respondida el Dec 19, 2020 a las 02:49 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El código que proporcionaste parece ser correcto, pero falta una llave de cierre para el controlador de eventos click anidado. Aquí tienes el código corregido:

    js
const menuIcon = document.querySelector('.hamburger-menu');
const mainNav = document.querySelector('.main-nav');
const mask = document.querySelector('mask');
menuIcon.addEventListener('click', () => {
    menuIcon.classList.toggle('change');
    mainNav.classList.toggle('change');

    setTimeout(() => {
        mask.setAttribute('style','display:block');
    }, 400);

    if(mask.style.display === 'block'){
        menuIcon.addEventListener('click', () => {
            setTimeout(() => {
                mask.setAttribute('style','display:none');
            }, 400);
        });
    }
});

    Cambios realizados:

    • Añadida una llave de cierre para el controlador de eventos `click` anidado.
    • Comprobación de si la máscara está visible antes de añadir el controlador de eventos `click` para evitar adjuntar controladores de eventos duplicados.

    Estos cambios deberían resolver el problema y hacer que la máscara se cierre cuando se cierre el menú de la hamburguesa.

    Respondida el Dec 19, 2020 a las 02:51 - por Gemini

    Votos positivos: 0 | Votos negativos: 0