在下拉列表中只選擇父元素以獲得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懸停功能

回答

相關問題