0

フォーカスとクリックの両方でサブナビゲーションを表示/非表示にする小さな jQuery 関数を作成しましたが、なぜ機能しないのかわかりません。

HTMLコードは次のとおりです。

<ul id="nav">
  <li>
    <a href="http://foo.com">Foo</a>
    <ul>
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 2</a></li>
      <li><a href="#">Sub 3</a></li>
    </ul>
  </li>
  <li>(...)</li>
</ul>

そして、ここにjQuery関数があります:

$(document).ready(function() {
  subnavDisplay('#nav > li > a');
});

var subnavDisplay = function(selector){
  if(!$(selector).length) return;

  $(selector).focus(function() {
    console.log('focus');
    $(this).parent().addClass('is_opened').siblings().removeClass('is_opened');
  });

  $(selector).click(function(e) {
    console.log('click');
    if($(this).parent('is_opened').length === 0) {
      e.preventDefault();
      $(this).parent().addClass('is_opened').siblings().removeClass('is_opened');
    }
  });
};

jsFiddle のデモ

サブナビを表示するリンクをアクティブにすると、フォーカス機能が常に再生され、クリック機能は再生されません。なぜなのかご存知ですか ？

ご回答ありがとうございます。

4

2 に答える 2

0

デフォルトですべての要素にフォーカスできるわけではありません。この動作を取得するにはtabindex、特定の要素に属性を<a>タグとして追加する必要があります。

デモを見る

$('#nav > li > a').attr('tabindex',-1);

しかし、Kolink が説明しているように、フォーカス コールバック関数内でアラートを使用すると何らかの問題が発生するため、代わりに console.log() を使用してイベントがトリガーされたことを確認します。

于 2013-04-27T13:42:49.240 に答える