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

0

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

Использование прослушивателей jQuery: после того, как пользователь нажимает на окно поиска, обновляет z-индекс кнопки:

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

и как только пользователь нажимает кнопку поиска с помощью прослушивателя "blur", повторно обновляйте z-index:

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

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

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

  • 0
    Вы можете опубликовать HTML чтобы мы могли видеть контекст?
Теги:
z-index

3 ответа

0
Лучший ответ

Дайте родительскому элементу поиск того же 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/

0

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

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

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

  • 0
    есть пункт, который является z-index: 9998, который должен появиться позади пункта меню
  • 0
    Вы могли бы попросить, чтобы это также было понижено, так как увеличение z-индекса до такой степени серьезно ограничивает!
0

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

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

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

  • 0
    Я не хочу, чтобы скрыть элемент полностью

Ещё вопросы

Сообщество Overcoder
Наверх
Меню