如果鼠标的div悬停，然后显示菜单

Question

我有以下的菜单我需要它悬停级联，但添加一些有条件的检查一样，如果鼠标上的DIV悬停，然后保持菜单往下滑。

而且如果鼠标在李盘旋，然后检查他们的菜单了。

正如你可以看到它只是下滑和备份，一旦你离开了“分区”。

林卡住......并试图几个小时寻找if语句等，我只是不能得到正确的语法。

my example

Answer 1

Here是一个工作示例

HTML

<div id="leftWrap"> 
    <div id='accordion'> 
     <ul> 
      <li><div>Absorption</div> 
       <ul style="display: none;"> 
        <li>Accessories</a> 
         <ul style="display: none;"> 
          <li>AA500AFG</li> 
          <li>AA500F</li> 
          <li>AA500G</li> 
          <li>AA990F</li> 
         </ul> 
        </li> 
        <li>Consumables</li> 
        <li>Products</li> 
       </ul> 
      </li> 
      <li><div>Fluorescence</div> 
       <ul style="display: none;"> 
        <li>Accessories</li> 
        <li>Consumables</li> 
        <li>Products</li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

的JavaScript/JQuery的

jQuery(document).ready(function() { 
    $('#accordion ul > li').hover(function() { 
     $(this).children("ul").slideToggle('slow'); 
    }); 
}); 

如果你问我，当你使用mousehover /的mouseenter这样的事情变得非常混乱。我更喜欢在第一次悬停之后使用点击事件，这样用户就不会被所有这些移动所困扰。

jQuery(document).ready(function() { 
    $('#accordion ul:first-child > li').hover(function() { 
     $(this).children("ul").slideToggle('slow'); 
    }); 

    $('#accordion ul:not(:first-child) > li').click(function(){ 
     $(this).children("ul").slideToggle('slow'); 
    }); 
}); 

Answer 2

让它的<div>的孩子，那么，当你离开它，它也不会取消该事件。

而且我要指出，这是更多的语义进行导航了嵌套列表（如

• 类别
  • 项目
  • 项目

<ul> 
    <li>Category 
     <ul> 
      <li>Item</li> 
      <li>Item</li> 
     </ul> 
    </li> 
</ul> 

Answer 3

^{我试着拨弄在你的小提琴中，但标记和css是很混乱。}

由于Rikudo说，你应该做的股利，其子其更容易做到这一点的方式。我创造了一个最简单的手风琴骨架。你可以看到它here。

它做你想要的一切。然而，对于定制和其他事情，我会留给你。

Answer 4

http://jsfiddle.net/dttdB/13/

您已经连接了悬停在标题DIV当鼠标离开的是，悬停效果都将丢失。