jQuery Hover - навигационное меню с метками, которые скрываются при наведении курсора и отображают выпадающее меню (выберите ввод)

#jquery #hover #html-lists #navigationbar

#jquery #наведите курсор #html-списки #панель навигации

Вопрос:

У меня есть панель навигации, используемая для фильтрации результатов поиска. Я пытаюсь поддерживать чистоту и разумный размер, поэтому у меня есть функция jQuery .hover, которая в основном скрывает метку опции фильтра при наведении курсора и заменяет ее выпадающим меню для выбора.

Моя единственная проблема в том, что при наведении курсора мыши на метку и выпадении меню вниз, если вы наведете курсор мыши, чтобы выбрать опцию, которая не отображается в пределах границ li, он думает, что вы зависли, а затем скрывает выбор и показывает метку.

Есть идеи, чтобы функция наведения не думала, что вы отключены, когда меню выбора отброшено, и вы пытаетесь выбрать опцию?

 $('li').hover(
    function(){
        $(this).children('.nav_label').hide();
        $(this).children('.nav_select').show();
    },
    function(){
        $(this).children('.nav_label').show();
        $(this).children('.nav_select').hide();
    }
);

<li><p>
    <div class="nav_label">Menu Options</div>
    <div class="nav_select" style="display:none;">
    <select >
        <option value="" selected="selected">Choose an Option</option>
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
    </select>   
    </div>
</p></li>

1. Из моего тестирования это работает в Chrome, но не в IE или FF — jsfiddle.net/mrtsherman/kpwJ9

2. Это ваше шоу, но я действительно нашел этот интерфейс странным в использовании. Мне бы это не понравилось как конечному пользователю. Возможно, просто текущая реализация еще не завершена.

Ответ №1:

Так что я не думаю, что есть отличный способ сделать это. Похоже, что в IE и FF событие hover out запускается, потому что выпадающий список выбора существует вне контейнера li.

Итак, что вам нужно сделать, это проверить, имеет ли выпадающий список фокус. Если это так, то не скрывайте список выбора.

http://jsfiddle.net/mrtsherman/kpwJ9/3/

Селектор :focus — это jQuery 1.6 . Я включаю инструкцию журнала, чтобы показать активный элемент, если вы используете более старый jQuery. Я уверен, что вы могли бы написать свое собственное решение вокруг этого. Я немного изменил ваш html, но вы должны быть в состоянии реализовать это, используя существующую структуру html с некоторыми дополнительными jquery. Я не думаю, что это имеет отношение к ответу.

 $('li').hover(

function() {
    $(this).children('.nav_label').hide();
    $(this).children('.nav_select').show();
}, function() {
    console.log(document.activeElement.id);
    if (!$('#myList').is(':focus')) {
        $(this).children('.nav_label').show();
        $(this).children('.nav_select').hide();
    }
});