Question

我正在构建一个由CSS驱动的菜单，我遇到了键盘用户的问题。 CSS :focus选择器没有跨浏览器支持，因此我尝试构建一个执行相同操作的jQuery脚本。

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>

菜单的CSS规则：

#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; }

这是我想要开始工作的jQuery代码：

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

Answer 1

你忘记了引言：

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

Answer 2

你忘了引号，jQuery应该是：

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

Answer 3

如其他答案中所述，用引号围绕最里面的选择器应该可以解决问题。

尽管如此，我还想进一步指出，建议使用jQuery 1.7中添加的on()函数绑定事件。以下是使用on()代码看起来的代码：

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

Here是关于on()的更多信息。

链接上的onfocus事件

3 个答案: