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

隐藏/显示正在工作。唯一的问题是，一旦我将鼠标悬停在触发器之外，我的子菜单也被隐藏了，所以我无法点击子菜单上的任何内容。

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

感谢您的帮助！

Answer 1

尝试使用嵌套的 ul-list 来完成。