保持子菜單在懸停後打開

Question

網站是Mariodidit.com

當懸停在「投資組合」上時，出現一個子菜單。 但是，如果將鼠標直接移動到中心項目上，菜單會消失，導致導航令人沮喪。我想用一些JavaScript徘徊「投資組合」

$('.main-navigation li ul li a').hide(); 
$('.main-navigation').live('hover', function(e) { 
    $(this).addClass('activeitem'); 
    $('.main-navigation li ul li a').show(); 
}); 

香港專業教育學院嘗試了幾個不同的代碼片段喜歡這一點，並沒有取得進展後保持打開狀態。 也使用「頁眉和頁腳腳本」插件將此腳本應用到我的WordPress站點。

Answer 1

您可能想要使用點擊而不是懸停。

(function($) { 
    $('.main-navigation li a').on('click', function(e) { 
     e.preventDefault(); 
     $(this).parent().toggleClass('active'); 
    }); 
})(jQuery); 

然後在CSS中爲該類添加樣式。

.main-navigation .active ul { 
    display: block; 
} 

.main-navigation ul ul { 
    display: none; 
}