gpt4 book ai didi

jquery - 为网站下拉导航添加键盘支持

转载 作者:行者123 更新时间:2023-11-28 19:03:09 25 4
gpt4 key购买 nike

我知道 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com