[英]onfocus event on a link
我正在构建一个由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");
});
});
你忘了报价:
$(document).ready(function(){
$('#whatWeDo').focus(function() {
$('#nav ul li ul').addClass("showMenu");
});
});
您忘记了引号,jQuery应该是:
$(document).ready(function(){
$('#whatWeDo').focus(function() {
$('#nav ul li ul').addClass("showMenu");
});
就像在其他答案中指出的那样,最内层的选择器要用引号引起来。
不过,我想进一步指出,建议您使用on()
函数绑定事件,该函数是在jQuery 1.7中添加的。 使用on()
代码如下所示:
$(document).ready(function(){
$("#whatWeDo").on("focus", function() {
$("#nav ul li ul").addClass("showMenu");
});
});
这是有关on()
更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.