Fokus auf Tastatur Registerkarte

Question

Ich versuche, ein barrierefreies Navigationsmenü mit verschachtelten Untermenüpunkte zu machen, das Problem, das ich habe ist, dass während der Navigation durch die Navigation alle inneren Links markiert, es nicht die Dropdown-Anzeige auslöst; Ich bin mir nicht sicher, ob dies von einem Fehler ist, Fokus auszulösen oder nicht, obwohl das ist, was ich vermute.

Die html ist in etwa entlang der Linien von:

<ul class="sf-menu"> 
<li> Link </li> 
... 
<li> Link 
    <ul> 
    <li> inner link </li> 
    ... 
    </ul> 
</li> 

Dann meine jQuery ist:

$("ul.sf-menu li").focus(function(){ 
this.toggleClass("over"); 
}); 
$("ul.sf-menu li ul").focus(function(){ 
this.toggleClass("over"); 
}); 

Wo die Klasse over die Anzeige setzt zu blockieren.

EDIT

ich Tab-Indizes auf Listenelemente mit dem Wert 0

Answer 1

erklärt haben ziemlich sicher, dass dies nicht das, was Tab tun soll, sondern stattdessen jQuery der Verwendung eines hinzufügen Klasse, können Sie den pseado css-Selektor :focus verwenden.

ul.sf-menu li:focus{ /* Code to fold it open */ } 

Answer 2

Sie sollten die focusin und focusout Ereignisse verwenden, da die focus und blur Ereignisse nicht Blase zu tun.

$('.item').on({ 
 
    'focusin mouseenter': function() { 
 
    $(this).addClass('open'); 
 
    }, 
 
    'focusout mouseleave': function() { 
 
    $(this).removeClass('open'); 
 
    } 
 
});

.item > ul { 
 
    position: fixed; 
 
    right: 100%; 
 
} 
 

 
.item.open > ul { 
 
    position: static; 
 
    right: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="item"> 
 
    <a href="#">1</a> 
 
    <ul> 
 
     <li> 
 
     <a href="#">1.1</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">1.2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="item"> 
 
    <a href="#">2</a> 
 
    <ul> 
 
     <li> 
 
     <a href="#">2.1</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">2.2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

---

Zusätzlich Elemente mit display: none Fokus nicht empfangen kann, so dass Ihr Code:

$("ul.sf-menu li ul").focus(...) 

kann nie ausführen, auch wenn Sie das focusin Ereignis verwenden aktualisieren.