Как сохранить меню видимым с .hover при создании выпадающего меню

Question

Я делаю выпадающее меню.Когда пользователь наводит курсор на кнопку «DROP», под ней появляется другой элемент «MENU», который будет меню.Как бы я показывал div "MENU", потому что когда пользователь убирает мышь с кнопки, он исчезает.Вот код jQuery:

$("#DROP").hover(
  function () {
    $('#MENU').fadeIn('fast');
  }, 
  function () {
    $('#MENU').fadeOut('fast');
  }
);

Как сохранить «МЕНЮ», отображаемое, когда мышь находится над ним?Затем исчезают, когда мышь выключается.И в то же время убедитесь, что «МЕНЮ» исчезает, если пользователь не наведет на него мышь.

Answer 1

Я считаю, что одним из решений было бы добавить задержку к эффекту затухания. 1-2 секунды должно быть достаточно долго.

$("#DROP").hover(
    function () {
    $('#MENU').fadeIn('fast');
}, 

function () {
    $('#MENU').delay(2000).fadeOut('fast');
});

Answer 2

Вы должны сделать #MENU дочерним элементом #DROP, поэтому событие mouseout не сработает, пока курсор не покинет и #DROP, и #MENU. См. http://jsfiddle.net/jAHs2/2/ для примера.

Другой альтернативой может быть использование комбинации setTimeout / clearTimeout для вызова функции fadeOut, чтобы вы могли отменить ее, когда пользователь наводит курсор на подменю.

Answer 3

Попробуйте подписаться на еще одну функцию, подобную этой,

var isInsideDrop = false;
$('#MENU').hover(function () {
     isInsideDrop = true; 
 $('#MENU').fadein('fast');
   },
   function () {
      $('#MENU').fadeOut('fast');
   }
);


 $('#MENU').mouseover(function(){
    if(isInsideDrop){
       $('#MENU').show();isInsideDrop = false;
    }
   });'

Answer 4

Добавьте и этот код, он должен помочь.

$('#MENU').hover(function () {
     $('#MENU').stop(); // stops current animation
     $('#MENU').show();
   },
   function () {
      $('#MENU').fadeOut('fast');
   }
);