Jquery：メニューの外をクリックした後にドロップダウンメニューが表示されなくなる

Question

jqueryが新しく、私はgoogleのコードを見て「More」ボタンを作成しています。私はそれを気にしていますが、ドロップダウンを消すための唯一の方法は、もう一度[More]ボタンをクリックすることです。これを変更するために追加できるメソッドはありますか？そのため、ドロップダウンメニューの外にあるクリックはすべて閉じます。洞察に感謝します！

http://jsfiddle.net/rKaPN/1/

Answer 1

バインド行われたすべてのクリックをキャプチャし、それがメニューに

$("html").click(function() { 
    menu.find('.active').removeClass('active'); 
}); 

を非表示にするためにHTMLにクリックイベント後.stopPropagation();

menu.find('ul li > a').bind('click', function (event) { 
    event.stopPropagation(); 

を使用して、メニューの clickイベントでこれをオーバーライドします

フィドル： http://jsfiddle.net/rKaPN/12/

Answer 2

メニューを開くときに、ウィンドウの幅と高さが同じ透明なオーバーレイdivを作成します。そのdivをクリックすると、メニューが閉じてdivが破棄されます。

Answer 3

あなたも、これを追加することができますので、ユーザは、あなたがあなたが作る特定のメニュー項目にblurイベントをバインドすることができ、すべてがHTML DOM要素をクリックしてテストするよりも、むしろ

$("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');}) 

Answer 4

をクリックする必要はありませんブラーイベントが発生したときにアクティブにして、それをオフにします。これらと

//displaying the drop down menu 
    $(this).parent().parent().find('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 

：これらのいくつかの行に置き換え、各たびに、不必要な多くの作業を行いますこれをクリックする上ので、

//displaying the drop down menu 
    $('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 
    $(this).blur(function() { 
     $('.active').removeClass('active'); 
    });