爲什麼這個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>黎族風情下拉菜單： <ul><li><a>Menu Item</a><ul><li><a>Sub Item 1</a></li>...</ul></li>....</ul>爲什麼這個jQuery在Chrome中工作，但不是FF或IE？

一切都非常標準真的。這個想法是使用Tab鍵訪問菜單。完美地運行在Chrome上：當一個子元素獲得焦點時，它確保父母以及任何子菜單顯示。當孩子失去焦點時，一切都會消失。

在FF中，它的行爲就像它只是在你的CSS樣式表中添加了一個：焦點選擇器 - 頂層菜單項效果很好，但只要進入菜單，它們就會崩潰。

在IE中它甚至更加怪異 - 你在菜單中選項卡，然後當你再次選中時，你將重置到以前的位置。

這不是一個真正的jQuery問題，我敢肯定 - 只是不同瀏覽器實現焦點，模糊和製表鍵的方式。什麼是解決方案？

編輯我要指出的是，如果你刪除整個模糊處理程序，所有三個瀏覽器的行爲完全一樣的方式（所有下拉菜單，你可以通過選項卡，但他們就是不經過你崩潰）

來源

2011-06-15 Tom Auger

該問題與瀏覽器如何緩存當前activeElement和處理tabindex以及何時每個瀏覽器在Tab按下之間處理onblur/onfocus有關。當您使用display：none來隱藏元素時，FF和IE將tabindex完全從標籤列表中刪除，而Chrome似乎不會。在FF和IE中，一旦項目失去焦點，並且上面的jQuery隱藏了該項目，則tabindex被搞砸了，activeElement又回到了BODY。使用負邊距而不是顯示：無法避免此問題。儘管如此，仍然很想知道細節。 – 2011-06-15 22:36:48

這個問題與瀏覽器緩存當前activeElement和處理tabindex有關，以及每個瀏覽器在Tab按下時處理onblur/onfocus。當您使用display：none來隱藏元素時，FF和IE將tabindex完全從標籤列表中刪除，而Chrome似乎不會。在FF和IE中，一旦項目失去焦點，並且上面的jQuery隱藏了該項目，則tabindex被搞砸了，activeElement又回到了BODY。使用負邊距而不是顯示：無可避免問題

來源

2011-10-17 17:31:14

某些版本的Internet Explorer和Firefox不支持子選擇器。

A（更長）的替代方法是使用：

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

或者，可以創建解析選擇器字符串和由所述分割>它，並分別做的的發現的功能。

來源

2011-06-15 22:24:01 foxy

我相信這與我的問題無關。 IE 7+和FF 2.x +均支持子選擇器。此外，jQuery無論如何都可以解決所有不兼容的問題。 – 2011-06-15 22:31:43

爲什麼這個jQuery在Chrome中工作，但不是FF或IE？

回答

相關問題