Блог

Следующий jsfiddle демонстрирует проблему. В Firefox наведите курсор мыши на «выделить истории» и попробуйте выбрать из второго выпадающего списка: содержащий ul анимируется закрытым, и выбрать опцию невозможно. Также можно попасть в мерцающий цикл, выбрав в верхнем поле выбора и слегка переместив мышь вниз.

Я могу удалить событие mouseleave, выполнив что-то вроде этого:

 $('.selector').click(function(){
      $('nav ul li').unbind('mouseleave');
});
  

Но это, очевидно, препятствует правильному запуску анимации наведения. Кто-нибудь может предложить более элегантное решение?

http://jsfiddle.net/codecowboy/mDUa9/8/

Вот моя попытка: http://jsfiddle.net/rPe9r /

 $('nav ul li').hover(function() { // mouse enter
    $('ul', this).slideDown(100);
    }, function() { // mouseout
        var container = $("ul", this);
        // Hide popup if dropdown menu is not active
        if (!container.hasClass("dropdown-active")) {
            container.slideUp(100);
        }
    });

$("nav select").bind("focus", function() {
    $(this).closest("ul").addClass("dropdown-active");
}).bind("change focusout", function() {
    $(this).closest("ul").removeClass("dropdown-active");
});
  

Код пытается определить, когда поле выбора активно, и подавляет slideUp содержимое контейнера в mouseleave, когда любое из полей выбора активно.

Я тестировал это только в Firefox, и я подозреваю, что это может быть слишком упрощенным и может не охватывать все варианты использования (например, когда пользователь выбирает уже выбранный элемент из выпадающего списка, который не вызовет change событие). Может потребоваться дальнейшее тестирование / настройка.

Возможно, более надежным методом было бы динамическое масштабирование высоты контейнера при расширении выпадающего списка таким образом, чтобы мышь не покидала контейнер, когда пользователи перемещаются по выпадающему меню. Конечно, сложность здесь заключается в том, чтобы определить размер выпадающего меню выбора переносимым способом.

Возможным обходным решением было бы использовать один из многих доступных плагинов jquery, который заменяет <select> на <div> . Это дает вам больше гибкости в стилизации выпадающих меню и, что более важно, позволяет настроить ваш css таким образом, чтобы содержащий div масштабировался автоматически при расширении выпадающего меню.

Просто мысль.