我有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”是按钮类
最佳答案
您可以将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/