es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • cómo eliminar el hipervínculo del icono del menú pero permitiendo que abra el submenú

cómo eliminar el hipervínculo del icono del menú pero permitiendo que abra el submenú

29 Jul, 2023 Programación

Mi pregunta es cuándo hago clic en el icono del menú (como un signo más o un desplegable) y si tiene algún enlace, no debería moverse a la página, sino mostrar primero el submenú. He aplicado este código JS:

let plus = document.querySelectorAll(".menu-item > a");
console.log(plus);
for (var i = 0; i < plus.length; i++){
  console.log(plus[i]);
  plus[i].addEventListener("click",(e)=>{
    let plusParent = e.target.parentElement;
    console.log(plusParent);
    plusParent.classList.toggle("showMenu");
  });
}

En esta imagen puedes verificar dónde quiero abrir el submenú al hacer clic en los iconos, pero no redirigir al enlace del icono padre: enlace a la imagen

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr esto, puedes modificar el script existente para evitar el comportamiento predeterminado del enlace de anclaje, que consiste en redireccionar al enlace asociado. En su lugar, podemos utilizar el método preventDefault() del objeto event para detener la redirección.

    Aquí está el código actualizado con la modificación:

    let plus = document.querySelectorAll(".menu-item > a");
console.log(plus);
for (var i = 0; i < plus.length; i++){
  console.log(plus[i]);
  plus[i].addEventListener("click",(e)=>{
    e.preventDefault(); // evitar comportamiento predeterminado
    let plusParent = e.target.parentElement;
    console.log(plusParent);    
    plusParent.classList.toggle("showMenu");
  });
}

    Este código ahora alternará la clase showMenu en el elemento padre al hacer clic en el enlace de anclaje y no redireccionará al enlace asociado. Esto debería lograr el comportamiento deseado de abrir el submenú antes de redireccionar.

Comments are closed.