Question

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

我在http://jsfiddle.net/karlgroves/HUKUf/

发布了一个JSFiddle

使用上面的代码我希望子菜单项能够在焦点和悬停时做出响应，但是在聚焦时它不起作用。有趣的是，CSS：focus伪类工作正常。

编辑：我说“CSS：focus伪类工作得很好” - 我的意思是：focus伪类可以很好地改变CSS属性，但是没有方法（包括使用：在选择器中聚焦）做我想要的，即显示子菜单项。

使用.focus（）也不起作用。

Answer 1

如果我错了，请纠正我，但我不记得能够在.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>

有点重复;但它确实有效。

Answer 2

我相信代码正常运行，而不是您的期望。

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

当我插入警报时，每次我徘徊一个孩子时它会发射两次。它发射两次的事实告诉我它创建了两个不同的功能。

Answer 3

实际上似乎没有事件触发的问题......看起来更像是通过选择器遍历DOM的问题。

我有forked your fiddle（哇......这听起来不对）如果您按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(); } });

它工作得很好......所以我真的认为问题只是悬停和焦点事件之间的一系列复杂的交互。除此之外，你有CSS来模仿悬停javascript事件（#navbar li:hover ul {display: block;}），你会得到更多潜在的冲突。 My updated version of your fiddle is here

jQuery没有对焦点作出反应

3 个答案: