Ich versuche meine Frage umzuformulieren und werde alle Schritte, die ich gemacht habe und insbesondere, wo ich gescheitert bin, durchgehen. Ich habe kein tiefes Wissen über JS, aber den Willen, durch Übung zu lernen, sowie die Hilfe der Gemeinschaft.
Ich stolperte über diese Antwort und erkannte den Nutzen. Da ich jQuery nicht verwenden möchte, habe ich angefangen, es in JS neu zu schreiben.
Referenz jQuery-Code von @zzzzBov :
%Vor%Mein JS-Code:
%Vor%Beim Öffnen des Menüs funktioniert das Problem nur dann, wenn das fokussierte Element (Menü) einmal angeklickt wird.
Der erste ist, dass der Link im Dialog nicht anklickbar ist. Versuch Wenn Sie darauf klicken oder auf den Tab klicken, wird der Dialog geschlossen Interaktion findet statt. Dies liegt daran, dass das innere Element fokussiert wird löst ein Fokusout-Ereignis aus, bevor erneut ein Fokus-Ereignis ausgelöst wird.
Die Lösung besteht darin, die Statusänderung in der Ereignisschleife in eine Warteschlange zu stellen. Das kann sein Mit setImmediate (...) oder setTimeout (..., 0) für Browser erledigt die setimmediate nicht unterstützen. Einmal in die Warteschlange gestellt, kann es durch a abgebrochen werden anschließender Fokus:
Das zweite Problem ist, dass der Dialog nicht geschlossen wird, wenn der Link ist erneut gedrückt. Dies liegt daran, dass der Dialog den Fokus verliert und den Auslöser auslöst close-Verhalten, nach dem der Link-Klick den Dialog anlockt wieder öffnen.
Ähnlich wie bei der vorherigen Ausgabe muss der Fokusstatus verwaltet werden. Wenn man bedenkt, dass der Statuswechsel bereits in die Warteschlange gestellt wurde, ist es nur ein Es ist wichtig, Fokusereignisse auf den Dialogauslösern zu behandeln:
Referenz jQuery-Code von @zzzzBov :
%Vor%Mein JS-Code:
%Vor%Das Öffnen des Menüs funktioniert immer noch, aber das Schließen auf Klick-Out beendete die Arbeit, nach der Recherche stellte ich fest, dass Unschärfe und Fokus die richtigen Methoden sind, aber ich denke, ich vermisse etwas Wesentliches.
Ich bin mir sicher, dass es noch viel zu lernen gibt, aber Hilfe wäre sehr willkommen. Vielen Dank Jungs.
Sie können den Fokus auf navmenu setzen, sobald er angezeigt wird. Wenn der Benutzer außerhalb davon klickt, wird das Ereignis blur ausgelöst und das Menü wird entfernt. Da das Klicken auf die Links auch das Ereignis blur auslöst, müssen wir das Menü auf dem Bildschirm behalten, wenn der Benutzer irgendwo im Menü klickt. Dies kann mit einem isMouseDown Flag überwacht werden.
Hier ist eine verbesserte Version des Codeausschnitts, der in Teil 1 Ihrer Frage angegeben ist.
Ich bin kürzlich auf dasselbe Problem gestoßen und es ist nicht so schwierig, wie es sich anhört. Sie müssen Ihrem Trigger einen Tabindex geben (um ihn fokussierbar zu machen, 0 ist gut). Geben Sie ihm einen 'click' Event-Handler, so ...
%Vor%Wo 'openClass' diejenige ist, die das Menü auslöst. Dann (angenommen var myTrigger) ...
%Vor%Hier wird durch Klicken auf den Toggle die offene Klasse ein- und ausgeschaltet, aber auch der Fokus wird dadurch prägromatisch festgelegt. Wenn Sie wegklicken, verliert das Element den Fokus, das Ereignis "Unschärfe" wird ausgelöst und der Handler entfernt die Klasse ...
Ich habe einen anderen Ansatz gewählt. Ich benutze eine toggleClass, um festzustellen, ob das Menü geöffnet ist oder nicht. Basierend auf diesem Klassennamen habe ich CSS geändert, so dass das Menü immer dann geöffnet wird, wenn die Klasse 'showMenu' zu unserem html-Tag hinzugefügt wird.
Der Code in der clickOutside-Methode überprüft, ob Sie außerhalb der angegebenen classNames klicken (in diesem Fall also .js-site-nav und .js-site-nav-btn - toggle). Wenn die Elemente, auf die Sie geklickt haben, nicht die Elemente mit den angegebenen Klassennamen sind, wird das Menü geschlossen.
Entschuldigung für das schlechte Markup in dieser Antwort, ich bin bei der Arbeit, also wenn ich zuhause bin, werde ich versuchen, diese Nachricht zu verbessern.
Hier ist der Code, den ich benutzt habe:
HTML
%Vor%CSS
%Vor%JavaScript
%Vor%Tags und Links javascript html jquery css