Question

我知道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个小时一直在这里，并且无处可去。

干杯，

Ť

更新：我真的很亲密！我添加了另一个jQuery函数，如果焦点在锚标记上，它将“悬停”类应用于父LI。我在上面的代码中添加了它。这将允许我在链接上显示并显示下拉链接，但是一旦我选择了它（我也更新了tabindex），它们就不会消失。

Ť

Answer 1

尝试以下

        <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，因为我不相信它。我认为你应该指定你想要在课堂上发生什么，否则你可能会陷入你没想到的状态。

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

1 个答案: