javascript - 添加超时会破坏一切

Question

我有 3 个导航按钮，当鼠标悬停在这些按钮上时，会打开下面的菜单。我想在鼠标离开按钮时添加一个计时器，这样它就不会在打开后立即关闭。然后它就有点出问题了。这是我在 jquery 中的起始代码，用于打开下拉菜单

$('.info').hover(function () {
    $('.d-skills').show(500);
    $('.d-info').hide(500);
    $('.d-exp').hide(500);
});

如果我在其中添加此代码，它就会中断并且没有任何效果

function(){ t = setTimeout(function(){$('.d-info').hide(500)}, 500;)
}

另外，我补充一下

var t;

从一开始，我就用“,”分隔函数。

'd-info'是下拉菜单的类，'info'是按钮类

Answer 1

您可以使用handlerOut函数hover .

下面是一个简单的代码片段，演示了这一点并在 1.5 秒延迟后隐藏这些部分。

$('.info').hover(function () {
    $('.d-sections').show(500);
}, function() {
   setTimeout(function() {
     $('.d-sections').hide(500);
   }, 1500);
});

.d-sections {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
    Hover here for more Information!
    <div class="d-sections">
      <div class="d-skills">
        The D Skills section!
      </div>
      <div class="d-info">
        The D Info section!
      </div>
      <div class="d-exp">
        The D Exp section!
      </div>
    </div>
</div>

https://jsfiddle.net/32bekom9/1/