在jquery悬停函数的下拉列表中仅选择父元素

Question

对于非常模糊的标题感到抱歉，我想不出更好的事情。基本上，我试图让我的下拉列表的父元素在悬停在其上时更改颜色，并将鼠标悬停在子项（子菜单）上时保持该颜色。这是父母和孩子的屏幕截图。

如您所见，当鼠标悬停在父级上时，会出现子菜单。目标是在将鼠标悬停在子菜单上时，“服务”保持橙色。我有它的工作，但我对我的想法感到不满意。我想知道是否有人知道如何做到这一点。

我使用了jQuery悬停功能。基本上它说的是，当特定菜单项的子菜单悬停时，那个特定的菜单项会得到一个类“主菜单 - 橙色”（这只是一个有颜色的类：＃ff6b57）。

它有效，但我对它不太满意，因为我必须在jQuery中选择单个项目。我不喜欢这个，因为如果另一个菜单项有子项，我必须复制并粘贴代码并更改菜单项ID。我不想继续为每个有子节点的菜单项复制和粘贴悬停功能。以下是我的代码。顺便说一下，我正在使用wordpress，并且会自动生成menu-item和menu-item-has-children等类。

low_level_read()

我还想出了以下代码。这表示如果子菜单悬停，那么父母就会获得橙色课程。

    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");
        }
    );

这有效，但缺点是所有的父母都上课了。因此，当“服务”悬停时，导航栏上的任何父级都会变为橙色。我在导航器上有几个父母的元素。

任何人都有关于如何清理这个jQuery的想法？也许使用'this'或其他东西。

谢谢！

另外，对于大量的文本感到抱歉，我试图彻底彻底地解释它，不幸的是，它附带了大量文本。

Answer 1

当您将鼠标悬停在$(this)代码上时，您应该使用a，因此它只定位悬停的a代码。

替换这行代码 jQuery("#menu-main-menu .menu-item-26 a").addClass("main-menu-orange"); jQuery("#menu-main-menu .menu-item-23 a").addClass("main-menu-orange"); 至 $(this)

Answer 2

在仪表板中转到外观 - ＆gt;菜单 - ＆gt;显示高级菜单属性

单击CSS Classes的复选框，它将为每个菜单添加文本框，然后您可以为父菜单添加Common类。 你可以写css。

Answer 3

我能够通过

获得解决方案

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");
    }
);