仅在 jquery 悬停功能的下拉列表中选择父元素答案

【问题标题】：Select only the parent element in a dropdown list for a jquery hover function仅在 jquery 悬停功能的下拉列表中选择父元素
【发布时间】：2016-11-12 00:51:06
【问题描述】：

对不起，这个非常模糊的标题，我想不出更好的了。基本上，我试图让我的下拉菜单的父元素在悬停在其上时更改颜色，并在悬停在子菜单（子菜单）上时保持该颜色。这是父母和孩子的屏幕截图。

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

我使用了 jQuery 悬停功能。基本上它所说的是，当特定菜单项的子菜单悬停时，该特定菜单项将获得一个类“main-menu-orange”（这只是一个具有颜色的类：#ff6b57）。

它可以工作，但我对它不太满意，因为我必须在 jQuery 中选择单个项目。我不喜欢这样，因为如果另一个菜单项有子项，我必须复制并粘贴代码并更改菜单项 ID。我不想继续为每个有子项的菜单项复制和粘贴悬停功能。下面是我的代码。顺便说一句，我用的是wordpress，菜单项和菜单项有子项等类是自动生成的。

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

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

有人对如何清理这个 jQuery 有任何想法吗？也许使用“this”之类的。

谢谢！

另外，对于大量的文字，我很抱歉，我试图完整而彻底地解释它，不幸的是，伴随着大量文字。

【问题讨论】：

你能告诉我们工作小提琴或sn-p mate

标签： jquery css wordpress

【解决方案1】：

当您将鼠标悬停在a 标签上时，您应该使用$(this)，这样它只会针对悬停的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)

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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");
    }
);

【讨论】：