ナビゲーションがマウスのホバーで同じように動作するようにする

Question

ナビゲーションをよりアクセシビリティにしようとしています。つまり、タブキーで動作するはずです。考え方は、内部のdivを持つすべてがページの読み込み時に隠されていて、テストのアンカーのどれかにカーソルを置くかフォーカスを当てると、対応するdivが表示されるはずです。

jqueryを使わずにホバーを動作させることができます。これはCSSだけです。しかし、私はフォーカスのために同じことをすることはできません。

私はjqueryのビットを書くことにしましたが、私はそれをかなり得ています。どんな助けでも大歓迎です。

<div class="nav"> 
    <ul> 
     <li> 
      <span><a href="">Test 1</a></span> 
      <div> 
       <ul> 
        <li><a href="">Link 1</a></li> 
        <li><a href="">Link 2</a></li> 
        <li><a href="">Link 3</a></li> 
       </ul> 
      </div> 
     </li> 
     <li> 
      <span><a href="">Test 2</a></span> 
      <div> 
       <ul> 
        <li><a href="">Link 1</a></li> 
        <li><a href="">Link 2</a></li> 
        <li><a href="">Link 3</a></li> 
       </ul> 
      </div> 
     </li> 
     <li> 
      <span><a href="">Test 3</a></span> 
      <div> 
       <ul> 
        <li><a href="">Link 1</a></li> 
        <li><a href="">Link 2</a></li> 
        <li><a href="">Link 3</a></li> 
       </ul> 
      </div> 
     </li> 
    </ul> 
</div> 


.nav ul li {float: left;} 
.nav ul li div {position:absolute; left: -999px;} 


$('.nav ul li span a').focus(function(){ 
    $('.nav ul li div').css({'left': '0'}); 
}).focusout(); 

Answer 1

以下の作品のようなもの：

<style> 
.nav ul li {float: left;} 
.nav ul li div {position:absolute; display:none;}​ 
</style> 
<script> 
$(document).ready(function() { 
    $('.nav ul li span a').on("focus mouseenter", function(){ 
     $(".nav div").hide(); 
     $(this).parent().siblings("div").show(); 
    }); 

    $(".nav ul li").on("mouseleave", function(){ 
     $("div",this).hide(); 
    }); 
}); 
</script> 

デモ：http://jsfiddle.net/nnnnnn/ArU6j/

まずアップ、むしろleft: -999pxよりdisplay:noneを使用してそれ以外の場合は[Tab]キーは "見えない" のフィールドをごタブをすることができます画面の端から外れます。

次に、トップレベルのアンカー要素のいずれかにマウスを移動するか、フォーカスを取得すると、現在のアンカーに適用可能な以前のサブメニューが非表示になります。

do アンカーがフォーカスを失ったときにサブメニューを非表示にすると、サブメニュー内の項目にタブすることができなくなります。

最後に、親要素からマウスを移動すると、そのサブメニューが非表示になります。トップレベルのアンカーからマウスを離しても、サブメニューにマウスを移動できないため、これは行いませんそれが消える前に。

（上記には少なくとも1つの軽微な問題がありますが、それを開始する必要があります）