jQuery - 悬停

Question

在过去几个小时尝试了各种方法和示例之后，我无法找到打开产品导航菜单子菜单的干净jQuery方法。导航项是从WordPress中的自定义Walker类中提取的。

这个想法是徘徊＆＃34;产品＆＃34;打开＆＃34;产品组＆＃34;在下面的级别，然后将产品组悬停打开它的子​​菜单（如果它具有下一级别 - 可能只是产品信息）。我使用first（）为顶层工作.fadeToggle - 我设置了一个JSFiddle，例如：https://jsfiddle.net/yvu237t2/4/

$( "ul#productnav" ).hover(function() {
  $( "ul.sub-menu" ).first().fadeToggle("fast");
});

我一直在找出定位和打开下一个子级别的语法，基于将鼠标悬停在它之前的水平。

任何见解，非常感谢。

以下是最终结果的设计补偿：

如果主组中只有一个产品，那么它将嵌套为：

Answer 1

我试图追踪的是使用children（）选择器 - 在此处发布以供参考，以防其他人寻找类似的东西。

$( 'ul#productnav li' ).hover(function() {
  $( this ).children( 'ul' ).toggleClass('active');
});