Tengo un menú simple, cada vez que hago clic en un elemento, los demás se desvanecen y el que se hizo clic sube si no es el primer elemento, y luego activo el href del enlace.
Para activar el enlace, necesito asegurarme de que el elemento esté en la parte superior de la página, después de addClass slideUpSm , el elemento en el que se hizo clic obtiene una nueva posición superior, pero creo que la posición superior debe actualizarse porque addClass slideUpSm obtiene el css top 0
setTimeout(function() {$('.main-nav li').addClass('slideUpSm')}, 1200);Después de eso, puedo activar la ubicación de la ventana, probé el método hasClass y también intenté verificar si la nueva posición superior es igual a cero, aquí está mi intento https://jsfiddle.net/n37kgv4r/
setTimeout(function() {window.location = href}, 100);Si solo desea ocultar los otros enlaces y navegar solo al nodo en el que se hizo clic, no necesitamos usar la parte superior de css. Podemos lograr esto con un simple código jquery.
$(document).ready(function(){ $('.main-nav li a').click(function(e){ $(this).parent().addClass('show'); $('.main-nav li').not('.show').slideUp(1200); var obj = $(this); setTimeout(function(){ //remove the alert alert("Navigating to "+ obj.attr('href')); window.location.href=obj.attr('href');},2000) return false; }); }); a { text-decoration: none; color: black; } .main-nav { position: relative; } .main-nav li { position: sticky; display: flex; font-size: 60px; line-height: 43px; letter-spacing: -3px; margin-bottom: 11px; transition: all 2s; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <ul class="main-nav"> <li><a href="page1.html">Page 1</a></li> <li><a href="page2.html">Page 2</a></li> <li><a href="page3.html">Page 3</a></li> </ul>