添加鍵盤支持網站下拉導航

我知道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），它們不會消失。

牛逼

來源

2011-01-25 tadywankenobi

順便說一句，jQuery庫是1.4.4。不是我認爲這有多大的區別，而只是fyi。此外，我還將所有腳本和樣式保持在內聯狀態，以便您更輕鬆地查看我的計劃。乾杯... – tadywankenobi 2011-01-25 17:13:54

請嘗試以下

 <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，因爲我不相信它。我想你應該指出你想要在課堂上發生什麼，否則你會陷入一種你並不期待的狀態。

來源

2011-01-25 17:56:44 troynt

你好！是一位紳士和學者。現在完美的工作。我同意，我通常不是toggleClass的粉絲，我在這裏用它來製作代碼。我的想法是，IE6懸停功能並不像鍵盤切換那樣重要，這是我主要關心的問題。你已經讓這個絕地隊成爲了一個非常快樂的野營者！ – tadywankenobi 2011-01-25 18:05:43

添加鍵盤支持網站下拉導航

回答

相關問題