Существует прогностический поиск, который создает выпадающее меню элементов, которые пользователь может выбрать. За выпадающим меню есть кнопка меню, которая содержит z-индекс 9999. Из-за этого перед выпадающим меню появляется кнопка меню. Чтобы исправить это, вот мое решение:
Использование прослушивателей jQuery: после того, как пользователь нажимает на окно поиска, обновляет z-индекс кнопки:
$( ".myIcon").css("z-index" , 1);
и как только пользователь нажимает кнопку поиска с помощью прослушивателя "blur", повторно обновляйте z-index:
$( ".myIcon").css("z-index" , 9999);
Это работает, но это не кажется очень чистым. У меня нет доступа к коду, который используется для создания раскрывающегося меню, поэтому не удается обновить z-индекс этого элемента.
Есть ли другое решение, о котором я не знаю?
Дайте родительскому элементу поиск того же z-индекса
Хотя трудно понять, что выглядит html, поскольку вы не включили пример. Если вы хотите, чтобы он отображался на одном уровне, вы можете дать ему тот же z-индекс из ворот. Если блок, в котором находится поисковая часть, находится после nav, то они, естественно, будут друг на друга с тем же z-индексом.
#nav,#search{position:absolute;z-index:9999}
например, поставит #search
выше #nav
если #search
после #nav
в html; как:
<parent><nav/><search/></parent>
Если он находится до него и, возможно, с другим родителем, вы можете использовать что-то вроде:
#nav{z-index:9998} #search{z-index:9999}
что было бы, если html больше похож:
<search/><parent><nav/></parent>
Хотя, если вам нужно, чтобы включить/выключить z-index, и он вообще не может быть зафиксирован на #search
, тогда вы уже направляетесь в правильном направлении.
Что-то вроде этого было бы довольно легко:
$('#search input').on('focusin', function(){//on focus
$(this).siblings('.myIcon').css({zIndex: '9999'});
}).on('focusout', function(){//on un-focus
$(this).siblings('.myIcon').css({zIndex: '1'});
});
Хотя, если бы вы могли контролировать css, вы могли бы просто создать класс для .myIcon
с z-index:9999
и вместо этого использовать что-то вроде этого:
.on{z-index:9999}/*added css*/
$('#search input').on('focusin focusout', function(){//on focus change
$(this).siblings('.myIcon').toggleClass('on');
});
сделал скрипку: http://jsfiddle.net/filever10/pxdz5/
Можете ли вы запросить, чтобы значок меню был изменен на нечто более разумное?
Нет необходимости в том, чтобы он был высоким, просто 1 значение над следующим элементом было достаточно.
Извините, но я не вижу другого способа решения этой проблемы, кроме той, которую вы предложили.
Вы можете использовать это:
$( ".myIcon").css("visibility", "hidden");
$( ".myIcon").css("visibility", "visible");
HTML
чтобы мы могли видеть контекст?