Seguí la explicación a continuación para crear lo que necesitaba, pero hay un requisito adicional que estoy tratando de cumplir.
resaltar el menú de navegación de la página actual
Los elementos de mi submenú son enlaces ancla en la misma página que el elemento del menú principal. Ejemplo:
$(function() { var url = window.location.href; $(".imagingmenu a").each(function() { if (url == (this.href)) { $(this).closest("li").addClass("active"); $(this).closest("li").parent().parent().addClass("active"); } }); }); .imagingmenu ul li.active a, .imagingmenu ul li a:hover { font-weight:bold; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="imagingmenu"> <ul> <li><a href="http://exampleurl-1.com">Menu item 1</a> <li><a href="#">Menu item 2</a> <ul> <li><a href="#/#submenuitem1">Submenu Item 1</a></li> <li><a href="#/#submenuitem2">Submenu Item 2</a></li> <li><a href="#/#submenuitem3">Submenu Item 3</a></li> </ul> </li> </ul> </div>Puede ver que la negrita funciona cuando pasa el cursor sobre los elementos del submenú, pero cuando se hace clic en ellos y están activos, solo quiero que ese elemento del submenú esté en negrita y el otro no. Sin embargo, cuando alguno de los elementos del submenú está activo, todos ellos en la lista aparecen en negrita. ¿Cómo puedo lograr lo que estoy buscando?
Gracias.
Este es tu problema:
$(this).closest("li").parent().parent().addClass("active");
Cuando hace clic en un "Elemento de submenú" como "Elemento de submenú 2", su código agrega la clase active a ese elemento, pero también agrega la clase active al padre del padre del <li> en el que se hizo clic .
El padre de <li> es el <ul> adjunto y el padre de eso es el
<li><a href="#">Menu item 2</a> así que terminas con esto (observa el lugar donde se agregó la clase active )
<ul> <li><a href="http://exampleurl-1.com">Menu item 1</a> <li class="active"><a href="#">Menu item 2</a> <ul> <li><a href="#/#submenuitem1">Submenu Item 1</a></li> <li class="active"><a href="#/#submenuitem2">Submenu Item 2</a></li> <li><a href="#/#submenuitem3">Submenu Item 3</a></li> </ul> </li> </ul> El <li> para "Elemento de menú 2" obtiene la clase active , por lo que está en negrita de acuerdo con la regla CSS
.imagingmenu ul li.active a
Es decir, el <li> completo, incluidos todos sus hijos: el <ul> interno y todos sus <li> están en negrita.
Intente comentar esa línea como se muestra a continuación (también agregué algunos console.log() s para poder ver lo que estaba haciendo)
$(function() { var url = window.location.href; $(".imagingmenu a").each(function() { console.log(`this.href=${this.href} compare to url ${url}`); if (url == (this.href)) { console.log('this is', $(this)); console.log('this.closest(li) is', $(this).closest('li')); $(this).closest("li").addClass("active"); //$(this).closest("li").parent().parent().addClass("active"); } }); }); También puede tener un problema porque agregar el objetivo hash # no vuelve a cargar la página, por lo que no vuelve a ejecutar su función.
En realidad, personalmente, manejaría esto de manera completamente diferente: agregaría un controlador de click a los elementos de la lista; el controlador recibe un parámetro de evento y puede usar event.target para agregar la clase "activa" al elemento de la lista en el que se hizo clic.