如果鼠標的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當鼠標離開的是，懸停效果都將丟失。