divのホバー上にマウスを置いて表示メニューを表示する場合

Question

次のメニューがありますが、マウスがdivの上にホバーしてメニューをスライドさせているような条件付きチェックを追加する必要があります。

また、マウスの上にマウスを置いた場合は、メニューを確認してください。

「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イベントを使用する場合、それは本当に厄介取得します。最初のホバーまたは何かの後にクリックイベントを使用することをお勧めします。この方法では、ユーザーはそのすべての動きに悩まされることはありません。

Answer 2

それ<div>の子作り、あなたがそれを離れるとき、それはイベントをキャンセルしないであろう。

また、私はそのような私がいじるしようとした

• カテゴリー
  • 項目
  • 項目

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

Answer 3

^{としてネストされたリスト（のうちのナビゲーションを作るために、よりセマンティックだということに注意してくださいあなたのフィドルでは、マークアップとCSSはかなり混乱しています。}

Rikudoと言いますと、divをその子にする方がずっと簡単です。私は最も単純なアコーデオン骨格を作った。あなたはそれを見ることができますhere。

あなたが望むものはすべてあります。しかし、カスタマイズやその他のものについては、私はそれをあなたに任せます。

Answer 4

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

マウスがホバー効果が失われている、ことを去るときには、見出しのdivにホバーを添付していました。