为什么这个 jQuery 可以在 Chrome 中运行，但不能在 FF 或 IE 中运行？
var item = $('li > a', $(MENU_ELEMENT));
item.focus(function(event){
$(this).siblings('ul').css('display', 'block');
$(this).parents('ul > li > ul').css('display', 'block');
});
item.blur(function(event){
$(this).siblings('ul').css('display', 'none');
$(this).parents('ul > li > ul').css('display', 'none');
});
本质上，MENU_ELEMENT 将是 ul > li 风格的下拉菜单具有以下层次结构：
一切都非常标准。这个想法是让菜单可以通过 Tab 键访问。在 Chrome 中完美运行：当子元素获得焦点时，它会确保显示父元素以及任何子菜单。当孩子失去注意力时，一切都会消失。
在 FF 中，它的行为就像您刚刚在 CSS 样式表中添加了一个 :focus 选择器一样 - 顶部菜单项工作得很好，但是一旦您进入菜单，它们就会崩溃。
在 IE 中，情况更奇怪 - 你按 Tab 键进入菜单，然后当你再次按 Tab 键时，你会重置到之前的位置。
我确信这并不是真正的 jQuery 问题 - 只是不同浏览器实现焦点、模糊和 Tab 键的方式不同。解决办法是什么？
编辑我应该指出，如果您删除整个模糊处理程序，所有三个浏览器的行为方式完全相同（菜单全部下拉，您可以通过选项卡浏览它们，但它们只是在之后不会折叠您可以从其中选择。）
var item = $('li > a', $(MENU_ELEMENT));
item.focus(function(event){
$(this).siblings('ul').css('display', 'block');
$(this).parents('ul > li > ul').css('display', 'block');
});
item.blur(function(event){
$(this).siblings('ul').css('display', 'none');
$(this).parents('ul > li > ul').css('display', 'none');
});
Essentially, MENU_ELEMENT would be a ul > li style dropdown menu with the following hierarchy:<ul><li><a>Menu Item</a><ul><li><a>Sub Item 1</a></li>...</ul></li>....</ul>
Everything's pretty standard really. The idea is to make the menu accessible with the tab key. Works in Chrome perfectly: when a child element receives focus, it makes sure that the parents as well as any submenus display. When the child loses focus, everything goes away.
In FF, it behaves like it would if you just added a :focus selector to your CSS stylesheet - the top menu items work great, but as soon as you go into a menu, they collapse.
In IE it's even weirder - you tab into a menu, then when you tab again, you're reset to the previous position.
This isn't really a jQuery issue, I'm sure - just the way the different browsers implement focus, blur and tab keys. What's the solution?
Edit I should point out that if you remove the entire blur handler, all three browsers behave exactly the same way (the menus all pull down and you can tab through them, but they just don't collapse after you tab out of them.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
某些版本的 Internet Explorer 和 Firefox 不支持子选择器。
一个（更长的）替代方案是使用：
或者，您可以创建一个函数来解析选择器字符串并将其按
>分割，然后分别进行查找。Some versions of Internet Explorer and Firefox do not support child selectors.
A (longer) alternative would be to use:
Alternatively, you can create a function that parses a selector string and splits it up by the
>and does the finds separately.这个问题更多地与浏览器如何缓存当前的 activeElement 和处理 tabindex 以及每个浏览器何时处理 Tab 按下之间的 onblur/onfocus 有关。当您使用 display:none 隐藏元素时，FF 和 IE 会从选项卡列表中完全删除 tabindex，而 Chrome 似乎不会。在 FF 和 IE 中，一旦某个项目失去焦点，并且上面的 jQuery 隐藏了该项目，tabindex 就会被搞砸，而 activeElement 又会变回 BODY。使用负边距而不是 display:none 可以避免这个问题
The issue has more to do with how the browsers cache the current activeElement and handle the tabindex, and WHEN each browser processes the onblur/onfocus between Tab presses. When you use display:none to hide elements, FF and IE remove the tabindex from the list of tabs altogether, whereas Chrome does not appear to. In FF and IE, once an item loses focus, and the jQuery above hides that item, the tabindex is screwed up and the activeElement goes back to being the BODY. Using negative margins instead of display:none avoids the issue