1

Tengo un menú con varios niveles de navegación que hasta hace poco tiempo funcionaba correctamente, pero de un tiempo a esta parte ha dejado de funcionar correctamente en dispositivos móviles.

Cuando hago clic para desplegar alguna opción, éste se oculta y cuando lo abro de nuevo la opción seleccionada está desplegada.

Lo monté en su momento integrando StickyNavbar.js.

En la siguiente URL se puede ver su funcionamiento erróneo:

10
  • Hola, bienvenido a la comunidad. Te invito a hacer el recorrido y leer ¿cómo preguntar?. Además, para poder reproducir tu problema y encontrar una solución fácilmente nos sería de gran ayuda un ejemplo mínimo, completo y verificable. Has enlazado a la página que te falla, pero es preferible que nos indiques en la pregunta el código que falla para poder reproducirlo aquí sin necesidad de acceder a páginas externas. el 24 ago. 2021 a las 8:06
  • Parece un problema de plugin de WordPress, yo buscaría otro plugin porque este parece antiguo y medio abandonado.
    – Juan
    el 24 ago. 2021 a las 8:36
  • Hola @Juan, la verdad es que no estoy utilizando ningún plugin para gestionar este menú. Gracias de todos modos por tu aportación el 24 ago. 2021 a las 9:50
  • Muchas gracias @OscarGarcia, pero la verdad es que no he podido aislar el error, por eso pedía ayuda de este modo. De todas formas, muchas gracias el 24 ago. 2021 a las 9:51
  • Todo apunta a que el contenedor padre está recibiendo el evento de clic de los hijos por propagación del evento. Veo muchísimo código javascript a partir de la línea 324 del HTML generado. ¿Ese ese es el código javascript que usas para controlar la navegación de los menús? Es decir, ¿los jQuery('.rv_button1').click(function(e) son los manipuladores de eventos? Si es así, ¿podrías poner e.stopPropagation(); además del e.preventDefault(); al comienzo de cada manipulador? el 24 ago. 2021 a las 10:19

1 respuesta 1

1

El problema que estás sufriendo es por culpa de la propagación de eventos.

Al hacer "clic" en un elemento éste recibe el evento "click" durante la fase Event.AT_TARGET, pero los padres también lo recibirán durante la fase de propagación Event.BUBBLING_PHASE.

Puedes ver más sobre el estado de la propagación de eventos en el siguiente enlace:

Aquí tienes la demostración de cómo el siguiente código se comporta como lo hace tu menú:

const fases = {
  0: "Event.NONE",
  1: "Event.CAPTURING_PHASE",
  2: "Event.AT_TARGET (elemento)",
  3: "Event.BUBBLING_PHASE (propagación)",
};

$(".boton").click((e) => {
  e.preventDefault();
  console.log(
    "Pulsado:",
    e.currentTarget.dataset.descripcion,
    "Fase:",
    fases[e.eventPhase]
  );
  $(e.currentTarget).children("ul").toggleClass('opened closed');
});
.opened {
  display: block;
}

.closed {
  display: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<div class="boton" data-descripcion="botón exterior">
  Menú principal
  <ul class="closed">
    <li>Hola 1</li>
    <li>
      <div class="boton" data-descripcion="botón interior">
        Submenú
        <ul class="closed">
          <li>Hola 2.1</li>
          <li>Hola 2.2</li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Para solucionarlo basta con detener la propagación del evento a los elementos padre mediante Event.stopPropagation().

Aquí tienes el código funcionando correctamente cancelando la propagación:

const fases = {
  0: "Event.NONE",
  1: "Event.CAPTURING_PHASE",
  2: "Event.AT_TARGET (elemento)",
  3: "Event.BUBBLING_PHASE (propagación)",
};

$(".boton").click((e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log(
    "Pulsado:",
    e.currentTarget.dataset.descripcion,
    "Fase:",
    fases[e.eventPhase]
  );
  $(e.currentTarget).children("ul").toggleClass('opened closed');
});
.opened {
  display: block;
}

.closed {
  display: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<div class="boton" data-descripcion="botón exterior">
  Menú principal
  <ul class="closed">
    <li>Hola 1</li>
    <li>
      <div class="boton" data-descripcion="botón interior">
        Submenú
        <ul class="closed">
          <li>Hola 2.1</li>
          <li>Hola 2.2</li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.