Обновление z-индекса несколько раз для правильного отображения пункта меню

Question

Существует прогностический поиск, который создает выпадающее меню элементов, которые пользователь может выбрать. За выпадающим меню есть кнопка меню, которая содержит z-индекс 9999. Из-за этого перед выпадающим меню появляется кнопка меню. Чтобы исправить это здесь мое решение:

Использование JQuery слушателей: После того как пользователь нажмет в поле поиска обновить Z-индекс кнопки:

$(".myIcon").css("z-index" , 1); 

и после того, как пользователь нажмет от окна поиска с помощью «смазанного» LISTENER повторно обновления Z-индекс:

$(".myIcon").css("z-index" , 9999); 

Это работает, но это, кажется, не очень чистые. У меня нет доступа к коду, который используется для создания раскрывающегося меню, поэтому не удается обновить z-индекс этого элемента.

Есть ли другое решение, о котором я не знаю?

Answer 1

Дайте родителю из поиска один и тот же 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/

Answer 2

Можете ли вы запросить замену значка меню на нечто более разумное?

Нет необходимости иметь его таким, чтобы его было достаточно, просто 1 значение над следующим элементом.

Извините, но я не вижу другого способа решения этой проблемы, кроме того, который вы предложили.

Answer 3

Вы можете использовать это:

$(".myIcon").css("visibility" , "hidden");

$(".myIcon").css("visibility" , "visible");