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.

¿Cómo desplegar el submenú uno a uno?

28 Jul, 2023 Programación

En la barra de navegación, el nombre de clase del submenú es “submenu”, tenemos 7 submenús. Estoy tratando de hacer algo similar a un “mouse hover”, pero sin usar eventos del mouse. Quiero mostrarlos uno por uno (mostrar el primero y ocultarlo, mostrar el segundo y ocultarlo), ¿cuál es la mejor manera de hacerlo con JavaScript?

Aquí está mi código, pero los muestra uno encima del otro:

function changestyle(){
    var els = document.getElementsByClassName("submenu");
    for(var i = 0; i < els.length-1; i++)
    {
        els[i].style.display = 'block';
    }
}

Intenté otro código, pero no funciona:

function changestyle(){
    var els = document.getElementsByClassName("submenu");
    for(var i = 0; i < els.length-1; i++)
    {
        const showone = function(){
            els[i].style.display = 'block';
        };

        const hideone = function(){
            els[i].style.display = 'none';
        };
        setTimeout(showone, 2000);
        setTimeout(hideone, 2000);
    }
}

Este es el código HTML para el submenú:

<div class="submenu">
    <ul class="linkmenu">
        <li class="d-md-none">
            <div class="nav-item standalone-nav"><span><a href="/wines/_/N-n" data-nav-label="Browse all Offers"><strong>Browse all Offers</strong></a></span></div>
        </li>
        <li>
            <div class="nav-item"><span>Type</span><i class="arrow down"></i></div>
            ...
        </li>
    </ul>
</div>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar y ocultar los submenús uno por uno, puedes utilizar una combinación de las funciones setInterval y setTimeout en JavaScript. Aquí tienes un ejemplo de código que debería funcionar:

    function mostrarSubmenus() {
  var submenus = document.getElementsByClassName("submenu"); // obtener todos los elementos de submenú
  var i = 0;
  var intervalId = setInterval(function() { // configurar un intervalo
    submenus[i].style.display = "block"; // mostrar el submenú actual
    setTimeout(function() { // después de 2 segundos
      submenus[i].style.display = "none"; // ocultar el submenú actual
      i++; // pasar al siguiente submenú
      if (i >= submenus.length) { // si se han mostrado y ocultado todos los submenús
        clearInterval(intervalId); // detener el intervalo
      }
    }, 2000);
  }, 2000);
}

    Este código utiliza setInterval para ejecutar repetidamente una función que muestra y oculta los submenús. El submenú actual se muestra utilizando submenus[i].style.display = "block", y luego se oculta después de 2 segundos utilizando setTimeout. La variable i lleva un seguimiento de qué submenú se está mostrando y ocultando actualmente, y la variable intervalId se utiliza para detener el intervalo cuando se han mostrado y ocultado todos los submenús. Puedes llamar a esta función en respuesta a un evento del usuario, como hacer clic en la barra de navegación.

Comments are closed.