jquery子菜单隐藏/显示子菜单在单独的div中

Question

如何在悬停时隐藏/显示子菜单，这不在原始触发器内？

我有以下代码：

HTML

<ul>
  <li class="toggleTrigger" id="subMenu"><a href="#">header</a></li>
</ul>

<div class="subMenu">
  <p>hello!</p>
</div>

的Javascript

function configFile() {
$('.toggleTrigger').hover(function () {
  var trigger = $(this).attr('id');
       target = '.'+trigger;
 $( target ).show();    
 }, function () {
     $( target ).hide();                
     });    
}

隐藏/节目正在运行。唯一的问题是，一旦我远离触发器，我的subMenu也被隐藏，所以我无法点击子菜单上的任何内容。

我不想将子菜单放在列表项中，因为它会弄乱我的CSS。有没有办法让我能够从触发器悬停到子菜单，只有当我离开时，子菜单才会被隐藏？

感谢您的帮助！

Answer 1

尝试使用嵌套的ul-list来执行此操作。