[Обновление] Плагин включен GitHub , и я работаю над некоторыми улучшениями (например, использование только с атрибутами данных (JS не требуется). Я оставляю кодниже, но это не то же самое, что на GitHub.
Мне понравилась чисто CSS-версия, но приятно иметь задержку до ее закрытия, так как обычно она лучше для пользователя (то есть не наказывается заскольжение мыши, которое выходит на 1 пиксель за пределы раскрывающегося списка и т. д.), и, как уже упоминалось в комментариях, существует 1пкс поля, с которым вам приходится иметь дело, или иногда навигация неожиданно закрывается при переходе к раскрывающемуся списку с исходной кнопки и т. д..
Я создал небольшой плагин, который я использовал на нескольких сайтах, и он отлично работает. Каждый элемент навигации обрабатывается независимо, поэтому у них есть свои таймеры задержки и т. Д.
JS
// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {
// the element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function() {
var $this = $(this).parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
options = $.extend(true, {}, defaults, options, data),
timeout;
$this.hover(function() {
if(options.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$(this).addClass('open');
}, function() {
timeout = window.setTimeout(function() {
$this.removeClass('open');
}, options.delay);
});
});
};
Параметр delay довольно понятен, и instantlyCloseOthers мгновенно закроет все другие раскрывающиеся списки, которые открываются при наведении курсора нановый.
Не чистый CSS, но, надеюсь, он поможет кому-то еще в этот поздний час (т. е. это старый поток).
Если хотите, вы можете увидеть различные процессы, которые я прошелчерез (в обсуждении #concrete5 IRC), чтобы заставить его работать через различные шаги в этой сути: https://gist.github.com/3876924
Подход с использованием шаблона плагинов намного чище для поддержки отдельных таймеров и т. д.
Подробнее читайте в блоге .