3

すべてのサブメニューをホバー時またはフォーカス時に表示する全幅のドロップダウン メニューがあります (キーボードでアクセスできるようにするため)。これはよく目にするメニューですが、ホバー動作をシミュレートする (つまり、メニューを展開する) 方法で実装されたキーボード アクセシビリティの例は見つかりませんでした。

メニューの HTML は次のとおりです。

<div id="menu">
    <div class="container">
      <ul class="row">
        <li class="first"><a href="link">Home</a></li>
        <li><a href="link">Projects</a>
          <ul class="inner">
             <li class="first"><a href="link">Project 1</a></li>
             <li class="last"><a href="link">Project 2</a></li>
          </ul>
        </li>
        <li class="last"><a href="link">Contact</a>
          <ul class="inner">
            <li class="first"><a href="link">Visit us</a></li>
            <li class="last"><a href="link">Email</a></li>
          </ul>
        </li>
     </ul>
  </div>
</div>

私はこれをJqueryで機能させるためにあらゆる種類の方法を試してきました（まだJqueryを学んでいます）が、部分的に機能します。ホバー機能はある程度機能しますが、まだ奇妙なことが起こっています。問題は、フォーカス/ぼかし機能にあります。ぼかし機能にタイムアウトを追加しました。そうしないと、タブで別のリンクに移動するたびに起動します。しかし、このタイムアウトを設定すると、ぼかし効果は発生しなくなります。（メニューは展開されたままです）。

これが他のソリューションと異なるのは、個々のリンクではなく、#menu div でホバー、フォーカス、ぼかしイベントを発生させたいことです。全幅のメニューなので、このように機能させたいと思います。メニューにカーソルを合わせると、すべてのサブメニューが一度に表示されます。div に「tabindex = 0」を追加すると、フォーカスとぼかしを使用できるようになることがわかりました。したがって、これも Jquery で追加することにしました。

私のJqueryは次のようになります。

$(document).ready(function() {

    /* dropdownmenu */
    $("#menu")
    .attr("tabindex",0)
    // HOVER
    .hover
    ( function () 
      {
       $(this).addClass('dropdown');
       $(this).animate({ height: '20em'});
      },
      //hover out
      function() 
      {
        $(this).animate(
            { height: '6em' }, 
            { complete: function() { $(this).removeClass('dropdown'); } }
        )
      }
    )
    // FOCUS
    .focus 
    ( function () 
      {
        $(this).addClass('dropdown');
        $(this).animate({height: '20em'});
      }

    )
    // BLUR
    .blur 
    ( function() 
      {
         setTimeout(function()
         {
        $(this).animate(
                    {height: '6em'}, 
                { complete: function() { $(this).removeClass('dropdown'); } }
            )
         },500);

      }
    );

この Jquery を改善するために、誰かが私を少し助けてくれることを願っています。それは長いですか？また、ホバー機能の動作がおかしく、ぼかし機能がまったく機能しないのはなぜですか? 私はこれについて別の方法で行くべきですか？

これも jsfiddle に追加しました: http://jsfiddle.net/CpdM2/1/ ここでは、動作をより適切に示すために高さが異なります。

助けてくれてありがとう！

編集

私は今、Jquery で別のアプローチを試みています。近づいてきましたが、唯一の問題はぼかし機能に残っています。

私の新しいjquery：

$.fn.accessibleDropDown = function ()
{
    var el = $(this);

    $(el).mouseenter(function() {
        $("#menu").addClass('dropdown');
        $("#menu").animate({ height: '7em'});
    }).mouseleave(function() {        
            $("#menu").animate(
                   { height: '1em' }, 
                { complete: function() { $("#menu").removeClass('dropdown'); } }
            );
    });


    /* Make dropdown menus keyboard accessible */

    $("#menu").focus(function() {
        //alert("focus");
       $("#menu").addClass('dropdown');
        $("#menu").animate({ height: '7em'});
    }).blur(function() {
        setTimeout(function() { 
         if ($('#menu').find(':focus').length > 0) {
             return false;
        } else {
            alert("menu does not have focus");
            $("#menu").animate(
                { height: '1em' }, 
                { complete: function() { $("#menu").removeClass('dropdown'); } }
            );
        }
       }, 50);
    });
};



$("#menu").attr("tabindex",0).accessibleDropDown();
​

ここで実際の動作を確認してください: http://jsfiddle.net/kBNRv/

#menu div がフォーカスを失ったかどうかを確認するコードが何らかの理由で機能していません。誰かが私を正しい方向に向けてくれることを本当に願っています。前もって感謝します。

4

1 に答える 1

0

より簡単なアプローチは、代わりにこれを使用することです。

$("#menu").mouseenter(function() {
    $(this).addClass('dropdown');
    $(this).animate({height: '7em'});
    $(this).focus(); /*OPTIONAL*/       
});

$("#menu").mouseleave(function() {
    $(this).removeClass('dropdown'); 
    $(this).animate({height: '1em' });
    $(this).blur(); /*OPTIONAL*/  
});

focus と blur メソッドは 'mouseenter' と 'mouseleave' で呼び出すことができます。このリスト要素は入力タイプではないため、同じ方法でクリックしてもフォーカスを受け入れません。何らかの方法でその行動を聞いていない限り、なぜフォーカスが必要なのかわかりません。

また、要素の z-index がメニューよりも高い場合、元のアプローチと同様に、このアプローチは考慮されないことに注意してください。メニューの上に要素を配置する場合、マウスがその要素の上に移動すると、「mouseleave」メソッドがトリガーされます。例を見るには、ここで「結果」ボックスをロールオーバーしてください: http://jsfiddle.net/CpdM2/17/。したがって、あなたが望むかもしれない行為に対抗するには：

a) メニューに要素を追加しないでください。

b) 「mouseleave」メソッドをトリガーする前に、マウスの x、y 位置をチェックして、メニュー領域に出入りしているかどうかを確認します。マウスの位置を確認する例は次のとおりです: http://docs.jquery.com/Tutorials:Mouse_Position

これは、フラッシュを使用したときのフラッシュバックで一般的なアプローチでした.....ため息

于 2013-05-31T19:32:44.170 に答える