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

一切都非常标准。我们的想法是使用tab键访问菜单。完美适用于Chrome：当子元素获得焦点时，它确保显示父项以及任何子菜单。当孩子失去焦点时，一切都会消失。

在FF中，它的行为就像你刚刚在CSS样式表中添加了一个：焦点选择器一样 - 顶级菜单项效果很好，但只要你进入菜单，就会崩溃。

在IE浏览器中它甚至更奇怪 - 你选择了一个菜单，然后当你再次选项卡时，你被重置到之前的位置。

这不是一个真正的jQuery问题，我敢肯定 - 只是不同浏览器实现焦点，模糊和Tab键的方式。解决方案是什么？

编辑我应该指出，如果您删除整个模糊处理程序，则所有三个浏览器的行为都完全相同（菜单全部拉下来，您可以通过它们进行选项卡，但它们只是“不要”选中它们后会崩溃。）

Answer 1

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

（更长的）替代方案是使用：

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

或者，您可以创建一个解析选择器字符串并按>拆分的函数，并单独执行查找。

Answer 2

该问题更多地与浏览器如何缓存当前的activeElement和处理tabindex以及每个浏览器何时处理Tab按下之间的onblur / onfocus有关。当您使用display：none来隐藏元素时，FF和IE会完全删除选项卡列表中的tabindex，而Chrome则不会显示。在FF和IE中，一旦一个项目失去焦点，并且上面的jQuery隐藏了该项目，tabindex被搞砸，activeElement又回到了BODY。使用负边距而不是显示：none可以避免问题

为什么这个jQuery在Chrome中运行但不在FF或IE中运行？

2 个答案: