udalosť onfocus na odkaze - javascript, jquery, html, css

Budujem ponuku, ktorá je riadená CSS, a narazil som na problém používateľov klávesnice. Pre CSS neexistuje podpora viacerých prehliadačov :focus selektor, takže sa snažím vytvoriť skript jQuery, ktorý vykoná rovnakú akciu.

Ponuka HTML:

<div id="nav">
<ul>
<li><a href="/index.asp" tabindex="12">Home</a></li>
<li><a href="/aboutus.asp" tabindex="13">About Us</a></li>
<li><a href="/whatWeDo.asp" tabindex="14" id="whatWeDo">What We Do</a>
<ul>
<li><a href="/whatWeDo1.asp">What we do1</a></li>
<li><a href="/whatWeDo2.asp">What we do2</a></li>
</ul>
</li>
<li><a href="/testStudies.asp">Test Studies</a></li>
</ul>
</div>

Pravidlá CSS pre menu:

#nav ul {
padding: 0; margin: 0;
}
#nav ul li {
list-style: none;
font-size: 16px;
}
#nav ul li ul li {
font-size: 13px;
}
#nav ul li ul {
display: none;
}

.showMenu, #nav ul li:hover ul{width:200px; padding:7px; background: #F2F2F2; border:1px solid  #F2F2F2; display: block; position: absolute; left: 85px; top: 30px; }

Tu je kód jQuery, ktorý sa snažím dostať do práce:

$(document).ready(function(){
$("#whatWeDo").focus(function() {
$(#nav ul li ul).addClass("showMenu");
});
});

odpovede:

zabudli ste úvodzovky:

$(document).ready(function(){
$("#whatWeDo").focus(function() {
$("#nav ul li ul").addClass("showMenu");
});
});

Zabudli ste úvodzovky, jQuery by mal byť:

$(document).ready(function(){
$("#whatWeDo").focus(function() {
$("#nav ul li ul").addClass("showMenu");
});

Ako je uvedené v iných odpovediach, obklopenie najvnútornejšieho selektora úvodzovkami by malo stačiť.

Rád by som však ďalej zdôraznil, že sa odporúča viazať udalosti pomocou súboru on() funkcia, ktorá bola pridaná do jQuery 1.7. Takto by vyzeral váš kód on():

$(document).ready(function(){
$("#whatWeDo").on("focus", function() {
$("#nav ul li ul").addClass("showMenu");
});
});

Tu je viac informácií o on().