菜单垂直手风琴jQuery的列表改变项目的

Question

我有一个垂直菜单手风琴和它扩展并示出在加价下面显示悬停孩子：

<ul> 
    <li><a href=""></a> 
     <ul> 
      <li><a href=""></a></li> 
      <li><a href=""></a></li> 
      <li><a href=""></a></li> 
     </ul> 
    </li> 
    <li><a href=""></a> 
     <ul> 
      <li><a href=""></a></li> 
      <li><a href=""></a></li> 
      <li><a href=""></a></li> 
     </ul> 
    </li> 
    <li><a href=""></a> 
     <ul> 
      <li><a href=""></a></li> 
      <li><a href=""></a></li> 
      <li><a href=""></a></li> 
     </ul> 
    </li> 
</ul> 

下面是一个例子：http://jsfiddle.net/A8CPd/

问题当您将鼠标悬停在儿童身上时，它不会保留悬停状态。

Answer 1

那么，你如何附加你的悬停侦听器有一个问题。您仅将侦听器附加到列表项目中的锚点。当您尝试悬停其中一个子菜单项时，您将不可避免地离开锚点元素，从而导致菜单再次崩溃。

相反，我相信这是你在找什么：

$("#accordion > li").hover(function(){ 
    $(this).find("ul").slideToggle(300); 
}); 

现在我们附加监听到整个li元素，其中还包含子菜单项。因此，菜单将保持打开状态，同时还可以将这些菜单悬停。

更新您的小提琴以及：http://jsfiddle.net/A8CPd/32/