我怎么能保持超级子菜单打开后鼠标离开顶部导航按钮

How can I keep mega sub menu open after mouse leaves top navigation button?

本文关键字：鼠标 离开 顶部 按钮 导航 菜单 怎么能      更新时间：2023-09-26

我是jQuery新手。我试图设置一个巨型下拉，是100%的宽度在屏幕上，但内容是居中。而且顶部导航按钮居中。

如何在鼠标离开顶部按钮后保持子内容区域打开?

小提琴在这里:http://jsfiddle.net/uf1107qs/

$('.top1').on('mouseenter', function () {
    $('.sub1').slideDown(200).addClass('.abTop');
    $('.fades1').delay(50).fadeIn(200);
});
$('.top1').on('mouseleave', function () {
    $('.sub1').delay(600).slideUp(200).removeClass('.abTop');
    $('.fades1').fadeOut(0);
});

您是否希望.subX和.fades1一直显示并且永不关闭?也许这就是你想要的?

JSFIDDLE罢工

编辑:

很抱歉我之前的误解。您可以通过使用setTimeout而不是delay来实现这一点，结果如下:JSFIDDLE，尽管它仍然很难看，因为它里面有许多重复的代码。

基本上你需要setTimeout当mouseleave为顶部，clearTimeout当mouseenter为顶部或子

其他方式:

的另一种方式来实现，你可以只使用CSS通过使用CSS属性，如position, visibilty, opacity, z-index，就像这个例子在JSFIDDLE

不使用延迟或超时。你可以使用回调函数，大多数jQuery内置函数都支持回调函数。这是你的代码:

$('.top1').on('mouseenter', function () {
  $('.sub1').slideDown(200).addClass('.abTop');
  $('.fades1').delay(50).fadeIn(200);
});

下面是我使用"回调"概念的版本:

$('.top1').on('mouseenter', function () {
  //see the difference?
  $('.sub1').slideDown(200, function(){
    $('.fades1').fadeIn(200);
  }).addClass('.abTop');
});

实际上发生的事情是slideDown()能够接受一个可选参数，该参数是函数。这个函数只有在200ms之后才会被触发(因为你把它设置为slideDown(200))。

在这种情况下，回调函数是一个简单的函数，只有在父函数(为了简单起见)完成它应该做的事情之后才被调用。查看更多信息:

http://www.w3schools.com/jquery/jquery_callback.asp

还

因为你是jQuery新手，你一定要看看hover()函数。你将能够简化你的代码，减少大约一半的JS行数，并且可读性更强!

http://api.jquery.com/hover/

相关文章：