基本的なJqueryメニューをゼロからドロップ

Question

jqueryを使って基本的なドロップダウンメニューを作成しようとしています。ユーザーがマウスを動かすと、divがその下にスライドします。ここでのコードは、私がこれまで持っている：

<script> 

$('.rentals-link').mouseenter(function() { 
    $('.region-drop-down-menu').slideDown(); 
}); 

$('.region-drop-down-menu').hover(function() { 
    $('.region-drop-down-menu').slideDown(); 
}); 

$('.region-drop-down-menu').mouseleave(function() { 
    $('.region-drop-down-menu').slideUp(); 
}); 


</script> 

コードの問題はしかし、私はマウスがボタン領域を離れるときのdivスライドアップを作成する方法を見つけ出すことはできませんし、また、それは時に上にスライドしているということです

divエリアを離れる。助言がありますか？

Answer 1

たぶんので、両方の要素がマウスポインタが閉じる前に、他の1の内側にあるかどうかを確認

<div class="dropdown-menu-toggle">Toggle</div> 
<div class="dropdown-menu-content">...</div> 

と

var isInDropDown = false, isInToggle = false; 
$('.dropdown-menu-toggle').mouseenter(function() { 
    $('.dropdown-menu-content').slideDown(); 
    isInToggle = true; 
}).mouseleave(function() { 
    setTimeout(function() { 
     if(! isInDropDown) { 
      $('.dropdown-menu-content').slideUp(); 
     } 
    }, 1000); 
    isInToggle = false; 
}); 
$('.dropdown-menu-content').mouseenter(function() { 
    $('.dropdown-menu-content').slideDown(); 
    isInDropDown = true; 
}).mouseleave(function() { 
    setTimeout(function() { 
     if(! isInToggle) { 
      $('.dropdown-menu-content').slideUp(); 
     } 
    }, 1000); 
    isInDropDown = false; 
}); 

を行います。また、これにより、ユーザはカーソルを移動させる時間（1秒）を得ることができる。私のjsfiddleのフォーク：http://jsfiddle.net/zkRq2/

Answer 2

通常、メインのdiv内にドロップダウンメニューを配置すると、メインのdivの一部になります。あなたがメインのdivにmouseleaveを持っているとき、それはドロップダウンを含みます。