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列表来做到这一点。