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

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

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

于 2012-04-04T18:38:48.413 回答
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();
    }
});​

它工作正常......所以我真的认为这个问题只是悬停和焦点事件之间的一组复杂的交互。再加上你有 CSS 来模仿悬停 javascript 事件 ( ) 的事实，你会#navbar li:hover ul {display: block;}得到更多潜在的冲突。 我的小提琴更新版本在这里。

于 2012-04-04T18:51:40.087 回答