Question

我做了一个小的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');
    }
  });
};

Demo on jsFiddle

当我激活显示子窗口的链接时，始终会播放焦点功能，而从不点击一下。你知道为什么吗？

非常感谢您的回答。

Answer 1

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

我用alert替换了console.log，我成功地获得了两个事件。

Answer 2

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

SEE DEMO

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

但是正如Kolink所解释的那样，使用alert inside focus回调函数会破坏一些东西，所以使用console.log（）来检查事件是否被触发。

jQuery函数：.focus（）错误地应用而不是.click（）

2 个答案: