определить статус jQuery при наведении на меню - PullRequest
0 голосов
/ 05 февраля 2011

Я работаю над написанием выпадающего меню с помощью jQuery, и у меня есть вопрос. Мое меню состоит из двух частей: span.menu_head (который находится в строке меню) и ul.menu_body (который содержит выпадающие элементы). У меня есть следующий код JQuery:

$("span.menu_head").hover(function(){
    $(this).next().slideDown('medium');
}, function(){
});

$("ul.menu_body").hover(function(){
}, function(){
    $(this).slideUp('medium');
});

Итак, когда я нахожу курсор над span.menu_head, ul.menu_body скользит вниз, а когда я покидаю ul.menu_body, он скользит вверх. Это работает, как ожидалось. Тем не менее, есть еще одна вещь, которую я пытаюсь добавить: когда мышь покидает span.menu_head, я хочу, чтобы ul.menu_body скользил вверх, если мышь не находится над ul.menu_body. Есть ли способ в jQuery определить, находится ли мышь над определенным элементом? Или есть лучший способ добиться этого эффекта?

Спасибо

Пол

1 Ответ

0 голосов
/ 05 февраля 2011

Я нашел решение, используя hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html).

Я установил флаг, когда мышь наводит курсор на ul.menu_body, чтобы я мог проверить этот флаг перед закрытием меню.

        var overBody = false;

        function mnuOpen() {
            $(this).next().slideDown('medium');
        }
        function mnuClose() {
            if (!overBody) {
                $(this).next().slideUp('medium');
            }
        }

        var headConfig = {
            over: mnuOpen,
            timeout: 250,
            out: mnuClose
        }

        $("span.menu_head").hoverIntent(config);

        $("ul.menu_body").hover(function(){
            overBody = true;
        }, function(){
            overBody = false;
            $(this).slideUp('medium');
        });

Это производит желаемое поведение. Есть еще одна вещь, которую я должен учитывать: если мышь переходит из подменю обратно в заголовок, мы не хотим закрывать и открывать заново, так что это может потребовать настройкидругой флаг, чтобы обнаружить это поведение.

Пол

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...