Seleccione solo el elemento padre en una lista desplegable para una función de desplazamiento de jquery - jquery, css, wordpress

Perdón por el título tan vago, no pude pensar.de nada mejor. Básicamente, estoy tratando de hacer que el elemento principal de mi menú desplegable cambie de color cuando se desplaza sobre él, y sigue siendo ese color cuando se desplaza sobre los elementos secundarios (el submenú). Aquí hay una captura de pantalla de los padres e hijos.

Como puede ver, al pasar el cursor sobre el padre,Aparece el submenú. El objetivo es hacerlo de manera que al pasar el cursor sobre el submenú, los "servicios" permanezcan en naranja. Lo tengo funcionando, pero no estoy contento con lo que se me ha ocurrido. Me preguntaba si alguien tiene una mejor idea de cómo hacer esto.

Utilicé una función de desplazamiento de jQuery. Básicamente, lo que dice es que cuando se desplaza el submenú de un elemento de menú en particular, ese elemento de menú en particular obtiene una clase "main-menu-orange" (que es solo una clase que tiene color: # ff6b57).

Funciona, pero no estoy muy contento con eso porqueTengo que seleccionar el elemento individual en el jQuery. No me gusta esto porque si otro elemento del menú tiene hijos, tengo que copiar y pegar el código y cambiar la ID del elemento del menú. No quiero seguir teniendo que copiar y pegar la función de desplazamiento para cada elemento del menú que tenga hijos. A continuación, se encuentra mi código. Por cierto, estoy usando WordPress y las clases como elemento de menú y elemento de menú has-children se generan automáticamente.

    jQuery("#menu-main-menu .menu-item-23 .sub-menu").hover(
function() {
jQuery("#menu-main-menu .menu-item-23 a").addClass("main-menu-orange");
},
function() {
jQuery("#menu-main-menu .menu-item-23 a").removeClass("main-menu-orange");
}
);

jQuery("#menu-main-menu .menu-item-26 .sub-menu").hover(
function() {
jQuery("#menu-main-menu .menu-item-26 a").addClass("main-menu-orange");
},
function() {
jQuery("#menu-main-menu .menu-item-26 a").removeClass("main-menu-orange");
}
);

También se me ocurrió el siguiente código. Esto dice que si se desplaza el submenú, los padres reciben la clase naranja.

     jQuery("#menu-main-menu .menu-item-has-children .sub-menu").hover(
function() {
jQuery("#menu-main-menu .menu-item-has-children a").addClass("main-menu-orange");
},
function() {
jQuery("#menu-main-menu .menu-item-has-children a").removeClass("main-menu-orange");
}
);

Esto funciona, pero la falla es que todos los padres reciben la clase. Así que cuando "servicios" se ciernen sobre, cualquier padre en la navegación se vuelve naranja. Tengo un par de elementos en la navegación que son padres.

¿Alguien tiene alguna idea sobre cómo limpiar este jQuery? Tal vez use "esto" o algo así.

¡Gracias!

Además, lamento la cantidad masiva de texto, traté de explicarlo completa y completamente, desafortunadamente eso vino con una tonelada de texto.

Respuestas

2 para la respuesta № 1

Deberías usar $(this) cuando te mueves en a etiqueta por lo que sólo se dirigiría a la flotación a etiqueta.

reemplazar estas lineas de codigos jQuery("#menu-main-menu .menu-item-26 a").addClass("main-menu-orange"); jQuery("#menu-main-menu .menu-item-23 a").addClass("main-menu-orange"); a $(this)

---

0 para la respuesta № 2

En el tablero de mandos Vaya a Apperance-> menu -> Show advanced menu properties

haga clic en la casilla de verificación de Clases de CSS, así será el cuadro de texto para cada menú y luego podrá agregar la clase común para el menú principal. y puedes escribir css.

---

0 para la respuesta № 3

Pude conseguir la solución haciendo

jQuery("#menu-main-menu .menu-item-has-children .sub-menu").hover(
function() {
jQuery(this).parent().find("a").addClass("main-menu-orange");
},
function() {
jQuery(this).parent().find("a").removeClass("main-menu-orange");
}
);

---