Question

我是jQuery的新手。我正在尝试在屏幕上设置100％宽度的超级下拉，但内容居中。顶部导航按钮也居中。

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

$('.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);
});

Answer 1

~~您希望.subX和.fades1继续显示并且永不关闭吗？也许这就是你想要的？~~

<击>
<击> JSFIDDLE

编辑：
对不起我以前的误会。您可以使用setTimeout而不是delay来实现这一目标，结果如下：JSFIDDLE，但它仍然很难看，因为其中有许多重复的代码

基本上，当setTimeout位于顶部时，您需要mouseleave;当clearTimeout位于顶部或子
时，您需要mouseenter
其他方式：

另一种方法是实现它，你可以使用CSS属性，例如position，visibilty，opacity，z-index，就像在{ {3}}

Answer 2

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

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

这是我的版本使用＆＃34;回调＆＃34;：

的概念

$('.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/

鼠标离开顶部导航按钮后如何保持大型子菜单打开？

2 个答案:

编辑：

其他方式：