DropDown-Menü mit jQuery

[Trüffelkrieger]

Ich habe ein kleines Problem.
Ich möchte ein DropDown-Menü erstellen, das auch mit der Tastatur bedient werden kann. Soweit ist noch alles klar, allerdings möchte ich, dass das Menü auf Mobilgeräten nur die Oberpunkte einblendet und erst nach einem Klick auf einen Oberpunkt dessen Unterpunkte.

Ich habe meinen aktuellen Stand mal in ein Pen gepackt, damit ihr euch das besser anschauen könnt.

Wie ihr seht, funktioniert das Ausklappen per Tabulator, schon gut. Auch das Einklappen, wenn der Fokus auf einen anderen Oberpunkt kommt, funktioniert problemlos. Die Zugänglichkeit per Tastatur ist also schonmal grundlegend gegeben.
Wenn ich allerdings auf einen Oberpunkt klicke, dann klappt sich das Untermenü kurz aus und dann wieder ein. Erst nach einem nochmaligen Klick auf diesen Operbunkt bleibt es offen und klappt sich erst nach einem Klick auf den Oberpunkt wieder ein ... Meiner Meinung nach ist das irgendein Konflikt zwischen focus und click, oder? Denn ein Klick wird ja auch als focus gewertet?!

Kann mir da jemand helfen?

 

[Trüffelkrieger]

Niemand eine Idee?

 

[Tronjer]

Zumindest nicht auf Anhieb.

Was ich tun würde:
- Auf Stackoverflow schauen, ob es mit click() und focus() Konflikte gibt.
- stopPropagation einsetzen, um Event Bubbling zu vermeiden
- Die Selektoren genauer differenzieren.

 

[Trüffelkrieger]

So, habe jetzt eine für meinen Fall zufriedenstellende Lösung gefunden: http://codepen.io/florianbrinkmann/pen/dBlAy
Da die Oberpunkte nie zu einer Seite verlinkt sind, nehme ich einfach per blur den Fokus von dem Element, sobald es angeklickt oder per Tab angesteuert wurde. Das Ganze mit einer kleinen Verzögerung, damit es nicht sofort den Fokus verliert und dadurch nicht die Klasse zugewiesen bekommt.

Jetzt das nächste Problem: Ich möchte, dass das Menü eingeklappt wird (also "einfach" alle sffocusparent-Klassen entfernt werden), wenn der Nutzer irgendwo anders hinklickt. Kann ich irgendwie prüfen, ob das angeklickte Element nicht zu #main-nav oder dessen Children gehört? Denn dann könnte ich ja eigentlich das per if prüfen und dann sagen, dass bei #main-nav li alle diese Klassen entfernt werden sollen.

 

[Tronjer]

Beim Klick auf den Body event.target.nodeName ausgeben lassen und mit deiner if-Abfrage verbinden.

 

[Trüffelkrieger]

So, jetzt konnte ich es endlich mal ausprobieren – funktioniert perfekt, vielen Dank!

 

[Trüffelkrieger]

Eine Ergänzung: Ich habe das ganze genutzt, um eine mobile Navigation zu realisieren (focus als Klick-Event auf dem Touch-Screen). Damit auch Safari das kann (auf dem Desktop), darf man noch in jeden Link ein tabindex-Attribut einbauen, da Safari mit dem focus()-Event so seine Probleme hat.