Tengo el siguiente código:
const burger = $("#burger-menu"); const main = $("#main"); const menu = $("#menu"); function showSideMenu() { $("#menu").removeClass("hidden"); $("#main").addClass("blurry"); $("#main").addClass("fixed"); burger[0].childNodes[1].childNodes[1].classList.add("burger-top-animate"); burger[0].childNodes[1].childNodes[3].classList.add("burger-bottom-animate"); } function hideSideMenu(event) { $("#menu").addClass("hidden"); $("#main").removeClass("blurry"); $("#main").removeClass("fixed"); burger[0].childNodes[1].childNodes[1].classList.remove("burger-top-animate"); burger[0].childNodes[1].childNodes[3].classList.remove( "burger-bottom-animate" ); } burger.click((event) => { event.preventDefault(); if (menu.hasClass("hidden")) showSideMenu(); else hideSideMenu(); });el evento de clic de hamburguesa maneja un menú de barra lateral colapsado (ocultar/mostrar). Se comporta como se esperaba, excepto que desplaza la página hacia arriba. No puedo explicarme cómo podría estar sucediendo eso y no pude encontrar el problema en ningún otro lugar.
El valor predeterminado de prevención no cambia como una cosa.
¡Cualquier ayuda es apreciada!
La propiedad position:fixed agregada al elemento causa esto. Considere establecer programéticamente el desenfoque en el elemento seleccionado después de presionarlo usando element.focus() .
burger.click((event) => { event.preventDefault(); if (menu.hasClass("hidden")) { showSideMenu(); event.target.focus() //--added line else hideSideMenu(); });No lo he probado yo mismo.
Tal vez será necesario envolver la declaración de enfoque en setTimeout, o menu.onfocus