1

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

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

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

$('#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();
    });
});
4

2 に答える 2

1

クリックイベントがボディまでバブルする場合は非表示にします。

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

ユーザーがメニューのどこかをクリックした場合、あなたはすでにそのクリックの伝播を防いでいるので、体はそれを聞くことはなく、そのためそれは隠されません。

私が気付いたもう1つのことは、HTML要素のクリックイベントハンドラー内でクリックイベントをバインドしていることです。これはかなり問題になる可能性があります。クリックが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();
});
于 2012-04-05T20:36:07.847 に答える
0

slideToggle機能に組み込まれているjQueryを使用してみましたか？

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

例：

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

ここで、700は、スライドトグルにかかる時間（ミリ秒単位）です。

あなたの場合：

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

于 2012-04-05T21:05:26.593 に答える