Javascript 链接上的onfocus事件
我正在构建一个由CSS驱动的菜单,我遇到了一个键盘用户的问题。CSSJavascript 链接上的onfocus事件,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在构建一个由CSS驱动的菜单,我遇到了一个键盘用户的问题。CSS:focus选择器不支持跨浏览器,因此我尝试构建一个jQuery脚本来执行相同的操作 HTML菜单: <div id="nav"> <ul> <li><a href="/index.asp" tabindex="12">Home</a></li> <li><a href="/aboutus.asp"
: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>
#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");
});
就像在其他答案中提到的那样,用引号围绕最里面的选择器应该可以做到这一点 不过,我想进一步指出,建议使用jQuery1.7中添加的
on()
函数绑定事件。下面是使用()上的时代码的外观
有关(
上的的更多信息是什么呢?那么代码面临的问题是什么?请尝试在第三个选择器周围添加引号,例如“#nav ul li ul”。记住将选择器放在引号内<代码>$(“#nav ul li ul”).ad.
我添加了引号,但仍然没有找到Joy我尝试了上面的代码,但仍然不起作用。当您将鼠标悬停在链接whatwedo上时,嵌套列表将作为子菜单弹出。我试图在jquery中创建一个功能,为键盘用户提供相同的效果。您使用的是什么版本的jquery?您必须使用最新版本才能在()上使用on
。最新版本是1.7.1,你可以从jQuery网站下载或使用它。一定有什么我没有做它仍然不工作我找到了解决方案。谢谢你的帮助。问题在于CSS样式隐藏了子菜单,而忽略了聚焦事件尝试使用的样式,因此我必须一次使用每个样式。我还将id#clientTest添加到Test Studies列表项中,这样一旦到达下一个链接,我就可以隐藏菜单。这里是生成的JQuery代码$(“#whatWeDo”).focus(function(){$(“.sideNav”).css(“display”,“block”);$(“.sideNav”).addClass(“showMenu”);})$(“#clientTest”).focus(function(){$(“.sideNav”).css(“display”,“none”);});
$(document).ready(function(){
$("#whatWeDo").on("focus", function() {
$("#nav ul li ul").addClass("showMenu");
});
});