在下拉列表中只选择父元素以获得jquery悬停功能

抱歉，标题非常模糊，我想不出更好的东西。基本上，我试图让我的下拉菜单的父元素在鼠标悬停时变成一种颜色，并在悬停在子元素（子菜单）上时保持该颜色。这是父母和孩子的截图。在下拉列表中只选择父元素以获得jquery悬停功能

正如你可以看到，鼠标悬停在父当出现子菜单。目标是在子菜单上悬停时，“服务”保持橙色。我有它的工作，但我不满意我的想法。我想知道如果有人有更好的想法如何做到这一点。

我使用了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的任何想法？也许使用'这个'或什么的。

谢谢！

此外，对于大量的文字，我试图完全彻底地解释它，不幸的是，它带有大量的文本。

来源

2016-11-12 cup_of

你能告诉我们的工作小提琴或摘录队友 –

当您将鼠标悬停在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)

来源

2016-11-12 00:55:14

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

CSS类的

点击复选框，就会使文本框的每个菜单，然后你可以添加父级菜单的通用类。，你可以写css。

来源

2016-11-12 17:09:59 Samyappa

我能够做得到解决

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

来源

2016-11-14 17:07:21

在下拉列表中只选择父元素以获得jquery悬停功能

回答

相关问题