我知道 Suckerfish 在这方面做得很好，但我不喜欢 Suckerfish 中的 javascript，并且认为必须有更简单的方法使用 jQuery 来完成这项工作。我完成了以下页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Test nav page</title>
<style type="text/css">
html {margin:0;padding:0;text-align:center;font-size:62.5%}
body {margin:0 auto;padding:0;width:600px;text-align:left;}
ul#nav {display:inline-block;width:260px;border:0;float:right;list-style:none;position:relative;}
ul#nav li {display:inline-block;float:left;width:130px;font-family:arial;color:#444;font-size:1.2em;font-weight:bold;text-align:center;position:relative;}
ul#nav li.t1, ul#nav li.t1 ul li a {background-color:#aad;}
ul#nav li.t2, ul#nav li.t2 ul li a {background-color:#daa;}
ul#nav li ul {position:absolute;left:-9999px;display:block;width:130px}
ul#nav li:hover ul,ul#nav li.hover ul, ul#nav li:focus ul {left:-40px;}
ul#nav li a {display:block;width:120px;padding:7px 5px;}
ul#nav li ul li a {border-top:solid 1px #ddd;font-size:0.9em;padding:7px 0;width:130px;display:inline-block}
</style>
</head>
<body>
<ul id="nav">
<li class="t1"><a href="#top1" tabindex="1">Top one</a>
<ul>
<li><a href="#first" tabindex="2">First</a></li>
<li><a href="#second" tabindex="3">Second</a></li>
</ul></li>
<li class="t2"><a href="#top2" tabindex="4">Top two</a>
<ul>
<li><a href="#third" tabindex="5">Third</a></li>
<li><a href="#fourth" tabindex="6">Fourth</a></li>
</ul></li>
</ul>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$('ul#nav li').hover(
function(){
$(this).toggleClass('hover');
});
// Updated with the following jQuery Function...
$('ul#nav li a').focus(
function(){
$(this).parent().addClass('hover');
});
// Just need a way of closing the dropdown when the key focus moves out of the li, not the anchor...
});
</script>
</body>
</html>
除了无法使用键盘访问外，一切都很好。谁能指出我缺少的东西!？这让我感到困惑，在过去的 2 个小时里一直在努力，但很快就一事无成。
干杯，
T
更新:我真的很接近了!我添加了另一个 jQuery 函数，如果焦点位于 anchor 标记上，它会将“悬停”类应用于父 LI。我已经在上面的代码中添加了它。这将允许我点击链接并显示下 zipper 接，但一旦我点击过去(我也更新了标签索引)它们就不会消失。
T
最佳答案
尝试以下操作
<script type="text/javascript" >
$(function(){
//for ie6
$('#nav li').hover(function(){ $(this).addClass('hover') }, function(){$(this).removeClass('hover')});
$('#nav a').focus(function(){
$(this).parents('li').addClass('hover');
});
$('#nav a').blur(function(){
$(this).parents('li').removeClass('hover');
});
})
</script>
注意:我更改了 toggleClass 因为我不信任它。我认为您应该指定您希望在类(class)中发生什么，否则您可能会陷入一种您没有预料到的状态。
关于jquery - 为网站下拉导航添加键盘支持，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4796656/