Почему этот jQuery работает в Chrome, а не в FF или IE? - PullRequest
Новая
       11

Почему этот jQuery работает в Chrome, а не в FF или IE?

2 голосов
/ 16 июня 2011 
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>

На самом деле все довольно стандартно.Идея состоит в том, чтобы сделать меню доступным с помощью клавиши табуляции.Прекрасно работает в Chrome: когда дочерний элемент получает фокус, он обеспечивает отображение родителей и любых подменю.Когда ребенок теряет фокус, все исчезает.

В FF он ведет себя так, как если бы вы просто добавили селектор: focus в таблицу стилей CSS - элементы верхнего меню работают отлично, но как только вы это сделаетев меню они сворачиваются.

В IE это еще более странно - вы вкладываете меню, а когда вы снова нажимаете, вы возвращаетесь на предыдущую позицию.

Это не такЯ уверен, что это действительно проблема jQuery - просто то, как разные браузеры реализуют клавиши фокусировки, размытия и табуляции.Какое решение?

Редактировать Я должен указать, что если вы удалите весь обработчик размытия, все три браузера будут вести себя одинаково (все меню опускаются, и вы можете перемещаться по ним, но они просто не рушатся после того, как вы их выбили.)

Ответы [ 2 ]

1 голос
/ 16 июня 2011

Некоторые версии Internet Explorer и Firefox не поддерживают дочерние селекторы.

(более длинная) альтернатива будет использовать: 

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

В качестве альтернативы, вы можете создать функцию, которая анализируетстрока выбора и разбивает ее на > и выполняет поиск отдельно.

0 голосов
/ 17 октября 2011

Проблема больше связана с тем, как браузеры кэшируют текущий activeElement и обрабатывают tabindex, и КОГДА каждый браузер обрабатывает onblur / onfocus между нажатиями Tab.Когда вы используете display: none, чтобы скрыть элементы, FF и IE полностью удаляют tabindex из списка вкладок, тогда как Chrome этого не делает.В FF и IE, когда элемент теряет фокус, а jQuery выше скрывает этот элемент, tabindex облажается, и activeElement возвращается в ТЕЛО.Использование отрицательных полей вместо отображения: ни один не устраняет проблему

...