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

【问题标题】：How to keep menu visible with .hover when creating a drop-down menu创建下拉菜单时如何使用 .hover 保持菜单可见
【发布时间】：2014-03-29 06:19:25
【问题描述】：

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

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

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

【问题讨论】：

友情提示，id 和 class 值不应以大写字母开头。

标签： jquery fadein fadeout

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您应该使#MENU 成为#DROP 的子元素，这样mouseout 事件才会在光标离开#DROP 和#MENU 之前触发。示例见http://jsfiddle.net/jAHs2/2/。

另一种选择是使用 setTimeout/clearTimeout 的组合来调用淡出功能，这样您就可以在用户悬停子菜单时取消它。

【讨论】：

【解决方案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;
    }
   });'

【讨论】：

【解决方案4】：

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

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

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

【讨论】：