jquery - 为什么这个 jQuery 可以在 Chrome 中运行，但不能在 FF 或 IE 中运行？

Question

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 样式的下拉菜单，具有以下层次结构: <ul><li><a>Menu Item</a><ul><li><a>Sub Item 1</a></li>...</ul></li>....</ul>

一切都非常标准。这个想法是让菜单可以通过 Tab 键访问。在 Chrome 中完美运行:当子元素获得焦点时，它会确保显示父元素以及任何子菜单。当 child 失去注意力时，一切都消失了。

在 FF 中，它的行为就像您刚刚在 CSS 样式表中添加了一个 :focus 选择器一样 - 顶部菜单项工作得很好，但是一旦您进入菜单，它们就会崩溃。

在 IE 中，情况更奇怪 - 你按 Tab 键进入菜单，然后当你再次按 Tab 键时，你会重置到之前的位置。

我确信这并不是真正的 jQuery 问题 - 只是不同浏览器实现焦点、模糊和 Tab 键的方式不同。解决办法是什么？

编辑我应该指出，如果您删除整个模糊处理程序，所有三个浏览器的行为方式完全相同(菜单全部下拉，您可以通过选项卡浏览它们，但它们只是不这样做)当您按 Tab 键退出它们后，不会崩溃。)

Answer 1

某些版本的 Internet Explorer 和 Firefox 不支持子选择器。

一个(更长的)替代方案是使用:

$(this).parents('ul').find('li').find('ul').css('display', 'block');

或者，您可以创建一个函数来解析选择器字符串并将其按 > 分割，然后分别进行查找。