保持子菜单在悬停后打开

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