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

我不熟悉jQuery。我正在尝试设置一个超大下拉列表，屏幕上的宽度为100%，但内容居中。顶部的导航按钮也居中

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

这是小提琴：

是否希望

.subX

和

.fades1

保持显示且从不关闭？ 也许这就是你想要的

编辑： 对不起，我以前误会了。您可以通过使用而不是

延迟
来实现这一点，结果是：，它仍然很难看，因为它里面有许多重复的代码

基本上，当
mouseleave
顶部时，需要
setTimeout
，当
mouseenter
顶部或子部分时，需要
cleartimout

其他方式：
另一种方法是，通过使用CSS属性（如
position
，
visibility
，
opacity
，
z-index
）只使用CSS，而不是使用延迟或超时。。您可以使用所谓的回调函数，这是大多数jQuery内置函数所支持的。这是您的代码：

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

以下是我使用“回调”概念的版本：

实际上，slideDown（）能够接受一个可选参数，该参数是函数的一部分。该函数只有在经过200毫秒后才会被触发（因为您已将其设置为slideDown（200））

因此，在本例中，回调函数是一个简单的函数，只有在父函数（为了简单起见）完成了它应该做的事情之后才被调用。有关更多信息：


同时

因为您是jQuery的新手，所以一定要检查hover（）函数。您将能够将代码简化大约一半的JS行，并且更具可读性

一个简单快捷的方法是将子内容设置为顶部按钮的子元素，这样它就不会真正“离开”悬停按钮区域。@Chad是的，我同意，但是，因为子内容区域设置为100%宽度，而顶部按钮的按钮具有设置的宽度，所以我不知道如何使其工作。绝对定位效果非常好。我确实希望当鼠标离开顶部按钮或子内容区域时，子内容区域向上滑动。我使用淡入只是作为一个样式问题-我希望背景向下滑动，但我希望内容在它下降后淡入。因此，您需要的是在鼠标输入时，先滑下
.fades1
，然后滑下
.subX
淡入，而不是同时？除此之外，我想这两个动作都是同时发生的，但是我在fadeIn上加了一个延迟，这样它就在滑下之后稍微出现。但是我确实希望当鼠标离开顶部按钮时，或者在鼠标离开子区域后，子区域向上滑动。对不起，我以前误解了你的问题。只要意识到当你在子区域上悬停时，它会在你放入mouseleave的延迟后关闭，所以你想要的是让它不会关闭，对吗？Kyojimaru-感谢你发布这两个解决方案。这正是我所希望的。
$('.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');
});