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 上的演示

当我激活链接以显示 subnav 时，始终播放焦点功能，而从不播放单击功能。你知道为什么吗 ？

非常感谢你的回答。

4

2 回答 2

0

当你使用alert时，它有破坏东西的倾向。在这种情况下，您可能已经专注于该元素，但您不再单击它。

我替换alert为console.log并且我成功地获得了这两个事件。

于 2013-04-27T13:39:27.907 回答
0

默认情况下，并非所有元素都可以聚焦。要获得此行为，您必须将属性添加tabindex到特定元素作为<a>标记：

看演示

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

但是正如 Kolink 所解释的，在焦点回调函数中使用 alert 会破坏一些东西，所以使用 console.log() 来检查事件是否被触发。

于 2013-04-27T13:42:49.240 回答