JQuery Hover - Меню навигации с метками, которые прячутся при наведении и отображают выпадающее меню (выберите вход) - PullRequest
Новая
       10

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

1 голос
/ 07 октября 2011

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

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

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

$('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 Ответ

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

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

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

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

: Селектор фокуса - это 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();
    }
});
...