ユーザーがメニューをクリックしたときにメニューを非表示にする良い方法はありますか？

Question

私は以下のコードを使用して、アンカーをクリックするとナビゲーションメニューを表示/非表示にします。

私が抱えている問題は、初めてページが読み込まれ、アンカーを2回クリックして表示する必要があるということです。その後、1回のクリックでメニューを切り替えることができます。私はまた、ドキュメント上の任意の場所にあるメニューをクリックして隠すことができます。

誰かが以下のコードに問題があるか、ユーザーがメニューをクリックしたときにメニューを非表示にする良い方法を知っていますか？

$('#aToggleQuickNavigation').click(function() { 
    $('#ulQuickNavigation').toggle(); 
}); 

$('html').click(function() { 
    if ($('#ulQuickNavigation').css('display') == 'block') { 
     $('#ulQuickNavigation').css('display', 'none'); 
    } 
    $('#aToggleQuickNavigation').click(function (event) { 
     event.stopPropagation(); 
    }); 
    $('#ulQuickNavigation li a').click(function (event) { 
     event.stopPropagation(); 
    }); 
}); 

Answer 1

隠すクリックイベントが体までのすべての方法を泡あれば、それは：

$("body").click(function(){ 
    $("#ulQuickNavigation").hide(); 
}); 

ユーザーがメニュー上の任意の場所をクリックすると、あなたはすでにそのクリックの伝播を防止すること、そうしています体はそれを聞くことはありません。そのようにそれは隠されません。

もう1つ注目すべきことは、HTML要素のclickイベントハンドラ内でクリックイベントをバインドしていることです。これはかなり問題になる可能性があります。クリックがHTML要素までバブルするたびに、ますます多くのクリックイベントがバインドされます。

ただ、今のところ、このような何かに固執：

// Any click that arrives at the body should close my navigation 
$("body").click(function(){ 
    $("#ulQuickNavigation").hide(); 
}); 

// Prevent clicks on nav from reaching the body 
$("#ulQuickNavigation").click(function(e){ 
    e.stopPropagation(); 
}); 

Answer 2

あなたはjQueryのを使用してみましたがslideToggle機能に建てられましたか？

基本的にdisplay：noneの要素をとります。それをクリック（または変更ロジックを設定する場所）に表示します。

例：700あなたはスライドトグルを撮りたいミリ秒単位の時間である

$("#ID").slideToggle(700);

。

あなたの場合：

$('#aToggleQuickNavigation').click(function() { $('#ulQuickNavigation').slideToggle(500); });