创建下拉菜单时如何使用 .hover 保持菜单可见

Question

我正在制作一个下拉（导航）菜单。当用户将鼠标悬停在“DROP”按钮上时，另一个名为“MENU”的 div 会淡入其下方，这将是菜单。我如何保持 div“MENU”显示，因为当用户将鼠标从按钮上移开时，它就会消失。这是 jQuery 代码：

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

当鼠标悬停在“菜单”上方时，如何保持“菜单”显示？当鼠标离开它时，就会消失。同时，确保如果用户没有将鼠标放在“菜单”上，“菜单”就会消失。

Answer 1

也添加此代码，它应该可以解决问题。

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

Answer 2

您应该使#MENU 成为#DROP 的子元素，这样在光标离开#DROP 和#MENU 之前，mouseout 事件不会触发。
有关示例，请参阅 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

我相信一种解决方案是为淡出效果添加延迟。 1-2秒应该足够长。

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

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