Gibt es eine bessere Möglichkeit, ein Menü auszublenden, wenn ein Benutzer darauf klickt?

Question

Ich verwende den folgenden Code, um ein Navigationsmenü beim Klicken auf einen Anker anzuzeigen/auszublenden.

Das Problem, das ich habe, ist, dass beim ersten Laden der Seite muss ich zweimal auf den Anker klicken, um das Menü anzuzeigen. Danach kann ich das Menü mit einem einzigen Klick umschalten. Ich kann auch irgendwo im Dokument auf das Menü klicken, um es auszublenden.

Hat jemand ein Problem mit dem unten stehenden Code oder weiß von einem besseren Weg für mich, das Menü zu verbergen, wenn ein Benutzer aus dem Menü klickt?

$('#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

ausgeblendet es, wenn das Click-Ereignis bis zum Körper des ganzen Weges Blasen:

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

Wenn der Benutzer eines beliebigen Stelle auf dem Menü klickt, Sie verhindert bereits die Ausbreitung von diesem Klick, so dass die Der Körper wird niemals davon hören, und als solches wird es nicht verborgen bleiben.

Eine andere Sache, die ich bemerkte, ist, dass Sie Ihre Click-Ereignisse innerhalb der Click-Ereignishandler des HTML-Elements binden. Das kann ziemlich problematisch sein. Jedes Mal, wenn ein Klick zum HTML-Element aufsteigt, binden Sie mehr und mehr Klickereignisse.

Just-Stick mit so etwas wie dies für jetzt:

// 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

Haben Sie versucht, in slideToggle Funktionalität die jQuery gebaut mit?

Grundsätzlich braucht es ein Element mit display: none; darauf und wird es bei Klick anzeigen (oder wo immer Sie die Änderungslogik einstellen).

Beispiel:

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

wo 700 ist die Zeit in Millisekunden Sie die Dia Toggle nehmen wollen.

In Ihrem Fall:

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