Sucede que estoy haciendo un menú el cual tiene dos subniveles, donde en pantallas mayores a 800px el evento que aplico para mostrarlo es hover
y si la pantalla es menor a 800px el evento será click
.
Hice un código que funciona parcialmente es decir si al cargar el menú el viewport
es mayor a 800px se aplica el evento hover
pero si luego se redimensiona el viewport
a menos de 800px el evento ya no cambia hasta que se recargue la página, lo mismo sucede si hago el proceso inverso.
Para solucionar esto estuve probando con el método resize()
para desencadenar el evento de acuerdo al tamaño del viewport
pero sucede que este no se ejecuta hasta que no cambie el tamaño de pantalla del navegador.
Ahora cuando uso resize
y cambio el viewport
a más de 800px se aplica el evento hover
tanto para escritorio como para móvil y al redimensionar supuestamente debería cambiar al evento click
pero no lo hace sino por el contrario los submenú se descontrolan, creo que el problema se encuentra en los if
ya que realiza una comparación por cada px que cambia el viewport
estoy investigando pero no logro dar con la solución.
El código funciona pero solo recargando la página cada vez, si se descomenta las líneas de ambos extremos se ejecutará el método resize
pero se altera el funcionamiento de los submenu.
Asimismo dejo el enlace del menú que hice para que puedan probar a detalle lo que menciono líneas arriba. Espero alguien pueda iluminarme aquí el enlace del código.