Tengo una instrucción if/else para nuestra navegación en la que cuando un usuario hace clic en el enlace asociado con la clase dropdown-toggle aparece un submenú.
Tenemos múltiples enlaces en nuestra navegación con la clase dropdown-toggle . Solo necesito apuntar a 1, no a todos, por eso estoy usando .eq(0) .
Cuando aparece el submenú, una nueva clase llamada open se inyecta en el padre <li> .
Por alguna razón, no puedo hacer que esta declaración if/else funcione completamente. Tengo la primera mitad funcionando pero no la segunda.
Para la else parte, estoy tratando de agregar lo que sucedería si se inyectara la clase open y se agregara la clase active-nav-tab .
active-nav-tab es la clase utilizada para el estado cuando los usuarios están en la página actual. Se supone que active-nav-tab desaparece cuando un usuario hace clic en el dropdown-toggle de la página actual solamente y cuando hace clic fuera de la ventana del submenú. Luego, cuando un usuario hace clic en un enlace de navegación con dropdown-toggle , se supone que active-nav-tab aparece nuevamente en la página actual. Esperemos que eso tenga sentido. Llevo como dos días en esto.
Código a continuación:
$('.dropdown-toggle').click(function (e) { if ($(this).not('open')) { $('.dropdown-toggle').eq(0).removeClass('active-nav-tab'); alert('test1'); } else { $('.dropdown-toggle').eq(0).addClass('active-nav-tab'); alert('test2'); } });HTML
<li> <a class="link dropdown-toggle active-nav-tab" role="button"> <span class="tab-icon icon-header-language"></span> <span class="tab-text">Region</span> </a> </li> <li class="open"> <a class="link dropdown-toggle" role="button"> <span class="tab-icon icon-header-language"></span> <span class="tab-text">Region</span> </a> </li> <li> <a class="link dropdown-toggle" role="button"> <span class="tab-icon icon-header-language"></span> <span class="tab-text">Region</span> </a> </li>No sé lo que me estoy perdiendo exactamente. Cualquier ayuda es apreciada con mucho gusto. ¡Gracias!
El cambio más rápido que puede hacer en su código para obtener el comportamiento que desea es reemplazar
if ($(this).not('open')) {Con
if ($('.dropdown-toggle').eq(0).hasClass('active-nav-tab')) {Pero sin conocer su caso de uso o cuántos elementos de "opción desplegable" tiene, es difícil decir si esta sería una solución completa o no.
Esto parece haber resuelto mi problema más o menos. Veré lo que dice QA jajaja ¡Gracias!
$('.active-nav-tab').click(function (e) { if ($(this).parents().hasClass("open")) { $(this).addClass('active-nav-tab'); alert('activated'); } else { $(this).removeClass('active-nav-tab'); alert('deactivated'); } });esto procesará hacer clic en el primer elemento con la clase "dropdown-toggle"
$('.dropdown-toggle:first').click(function () { $(this).toggleClass("active-nav-tab"); if ($(this).hasClass("active-nav-tab")) { alert ("Tab activated"); } else { alert ("Tab deactivated"); } } también se debe usar la función jQuery not(selector) en la enumeración de objetos para filtrarla.