[FF] Navigation mit Tab

[Carrear]

Hi Leute,

ich habe eine Verschachtelte Liste als Navigation, wobei die zweite Ebene der Liste zu Beginn erst ausgeblendet ist. Bei Hover wird das ganze dann angezeigt. Die Navi muss aber auch mit Tabulatro navigierbar sein. Sobald der Fokus auf den Listenpunkten zweiter Ebene liegt, klappt das aber nicht mehr, das es in CSS ja keinen Parent Selektor gibt. Also habe ich das ganze mit folgendem JS/jQuery Code erweitert:

  $("nav ul li ul li").on("focus blur","a", function(){
  $(this).closest("ul").toggleClass("opened");
  });

bzw war es zuerst:

  $("nav ul li ul li").on("focusin focusout","a", function(){
  $(this).closest("ul").toggleClass("opened");
  });

Die Navi sieht so aus:

<nav class="association col-l-3 l-ult col-m-2 m-ult s-hidden">
<ul>
<li class="active"><a href="" title="" tabindex="5">Aktuelles</a>
<ul>
<li><a href="" title="" tabindex="6">Stellenausschreibungen</a></li>
<li><a href="" title="" tabindex="7">News</a></li>
<li><a href="" title="" tabindex="8">Archiv</a></li>
</ul>
</li>
<li><a href="" title="" tabindex="9">Über uns</a>
<ul>
<li><a href="" title="" tabindex="10">Leitbild</a></li>
<li><a href="" title="" tabindex="11">Verein</a></li>
</ul>
</li>
<li><a href="" title="" tabindex="12">Links</a></li>
<li><a href="" title="" tabindex="13">Impressum</a></li>
<li><a href="" title="" tabindex="14">Kontakt</a></li>
</ul>
</nav>

Im Chrome klappts wunderbar, in Firefox (aktuellste Version) nicht. Ich habe das Gefühl, er fokussiert die Menüpunkte, welche über display:none; nicht sichtbar sind gar nicht.

Hat jemand eine Idee parat?

 

[Parantatatam]

Du könntest überwachen, ob die Tabulatortaste gedrückt wird und in diesem Fall überprüfen, welches Element momentan den Fokus hat, dessen Index auslesen, um eins erhöhen und dann entweder den Fokus auf das Element mit diesem Index legen oder auf das Element mit dem Index 1. Nicht schön, müsste aber gehen.

 

[Carrear]

Aber eine Erklärung, warum das so im Chrome funktioniert und im FF nicht, hast du auch nicht oder?

 

[Parantatatam]

Chrome und Firefox bauen auf unterschiedliche Webengines auf, insofern kann es sein, dass dieses Detail unterschiedlich implementiert wurde.