0 
$('#navbar ul').addClass('hidden');
   $('#navbar li a').on('focus hover', function(){
    $(this).siblings('ul').toggleClass('hidden');       
});

これの JSFiddle を投稿しました: http://jsfiddle.net/karlgroves/HUKUf/

上記のコードを使用して、サブメニュー項目がフォーカスとホバーの両方に応答するようにしますが、フォーカスすると機能しません。興味深いことに、CSS :focus 疑似クラスは問題なく動作します。

編集:「CSS :focus 疑似クラスは正常に動作する」と言います - つまり、:focus 疑似クラスは CSS プロパティを変更するために正常に動作しますが、メソッド (セレクターで :focus を使用することを含む) は何を行うかということです。サブメニュー項目を表示するつもりです。

.focus() の使用も機能しません。

4

3 に答える 3

0

実際にはイベントの発生に問題があるようには見えません...セレクターを介してDOMをトラバースする際の問題のように見えます。

私はあなたのフィドルを分岐させました（うわー..それは間違っているように聞こえます）。IDで静的要素を取得している場合、フォーカスとホバーイベントごとにイベントが正常に発生することがわかります。$(this).siblings('ul')そのため、フォーカス イベントでセレクターが期待どおりに動作していないように見えます。event.target と event.currentTarget が何であるかを確認します。

編集：

わかりました...私は以前の声明を再評価しています。コードを次のように変更しました。

$('#navbar li a').on('focusin focusout mouseover mouseout', function(event) {
    if (event.type == 'focusin' || event.type == 'mouseover') {
        $(this).siblings('ul').show();
    }
    else {
        $(this).siblings('ul').hide();
    }
});​

それは正常に動作します...したがって、問題はホバーイベントとフォーカスイベント間の複雑な相互作用のセットにすぎないと本当に思います。それに加えて、JavaScript のホバー イベント ( #navbar li:hover ul {display: block;}) を模倣する CSS があるため、衝突がさらに発生する可能性があります。 あなたのフィドルの私の更新版はこちらです。

于 2012-04-04T18:51:40.087 に答える
0

間違っている場合は訂正してください。ただし、.on 関数でスペース区切りを介して 2 つのイベントをスローできることを覚えていません。

ドキュメントによると、次のように複数のイベントを添付できるはずです。

<script type="text/javascript">
$('#navbar li a').on(
{
  focus: function(){
    $(this).siblings('ul').toggleClass('hidden');
  },
  hover: function(){
    $(this).siblings('ul').toggleClass('hidden');
  }
});
</script>

やや反復的です。しかし、それは機能します。

于 2012-04-04T18:36:13.433 に答える
0

コードは機能していると思いますが、期待どおりではありません。

    $('#navbar ul').addClass('hidden');
   $('#navbar li a').on('focus hover', function(){
    alert('hey');
    $(this).siblings('ul').toggleClass('hidden');       
});

</p>

アラートを挿入すると、子供をホバリングするたびにアラートが 2 回発生しました。2 回起動するという事実は、2 つの異なる機能が作成されていることを示しています。

于 2012-04-04T18:38:48.413 に答える