Сохранение отображения выпадающего меню, когда мышь покидает меню управления при наведении курсора - PullRequest
Новая
       9

Сохранение отображения выпадающего меню, когда мышь покидает меню управления при наведении курсора

1 голос
/ 11 декабря 2011

У меня есть простое выпадающее меню, которое управляется с помощью следующего скрипта: 

$(document).ready(function () {
    $('img.menu_class').hover(function () {
    $('.the_menu').slideToggle('medium');
    });
});

Я не могу понять, как продолжать отображать отображаемый div, то есть ".the_menu", когда мышь покидает div "img.menu_class", но остается в div ".the_menu". Его нужно сохранить, пока мышь находится в одном из этих элементов.

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

Может ли кто-нибудь помочь с этим?

Спасибо

Ник

Ответы [ 3 ]

1 голос
/ 11 декабря 2011

когда вы вызываете hover только с одним аргументом, он запускает функцию-обработчик, которую вы передаете для событий mouseenter и mouseleave.То есть, это slideToggling «.the_menu» дважды - один раз, когда вы mouseover, один раз, когда вы mouseleave: http://api.jquery.com/hover/#hover2

Вам нужно вызвать hover с двумя аргументами, передать отдельную функцию-обработчикпозвоните mouseleave.http://api.jquery.com/hover/#hover1

пример: 

$('img.menu_class').hover(function () {
        $('.the_menu').slideDown('medium');
    }, function() {
        // do something else in mouseleave - you don't necessarily want to slideUp ".the_menu" yet
    });
1 голос
/ 11 декабря 2011

Вместо hover() вы можете переключиться на mouseenter() и mouseleave() и немного изменить разметку.

Пример:

HTML: 

<div class="menu_class">
  <img src="http://salliannputman.com/images/nav.png">
  <div class="submenu" style="display: none">
    <img src="http://salliannputman.com/images/nav3.png" />
  </div>     
</div>

JS: 

$('img.menu_class').mouseenter(function() {
  $('img.submenu').slideDown('medium');
});
$('img.menu_class').mouseleave(function() {
  $('img.submenu').slideUp('medium');
});

ЗДЕСЬ - рабочий код.

1 голос
/ 11 декабря 2011

Вы можете использовать setTimeout, чтобы создать задержку при скрытии меню: 

$(function () {
    var myTimer,
        myDelay = 100;

    $('img.menu_class, .the_menu').hover(function () { 

        //when either a `img.menu_class` or a `.the_menu` element is hovered over, clear the timeout to hide the menu and slide the menu into view if it aleady isn't
        clearTimeout(myTimer);
        $('.the_menu').stop(true, true).slideDown('medium');
    },
    function () {

        //when either a `img.menu_class` or a `.the_menu` element is hovered out, set a timeout to hide the menu
        myTimer = setTimeout(function () {$('.the_menu').stop(true, true).slideUp('medium');}, myDelay);
    });
});

Вот демоверсия: http://jsfiddle.net/7vrGu/2/

...