所以我创建了一个简单的小悬停,它使用链接中的一个类来显示下面的div.
显示/隐藏工作正常,但我无法弄清楚如何设置它,以便如果鼠标在div上,它不会隐藏.我尝试使用(this)和.hover,但没有成功.
这是我的代码：
$(document).ready(function()
{
// hide all dropdown
$("#dropdown1").hide();
//hover show dropdown
$(".menu-level-one").hover(
function () {
$("#dropdown1").show();
},function () {
var postTimer1 = setTimeout(function(){ $("#dropdown1").hide(); },1000);
}
);
});
解决方法
您可以使用clearTimeout(postTimer1)来停止执行计时器.因此,如果用户将鼠标悬停在#dropdown1上,请清除计时器.
也许是这样的：
$(document).ready(function() {
var hideTimer = null
var dropdown = $("#dropdown1",this)
var menu = $(".menu-level-one",this)
dropdown.hide();
$([dropdown[0],menu[0]]).hover(
function() {
if (hideDropdownTimer)
clearTimeout(hideDropdownTimer);
dropdown.show();
},function() {
if (hideDropdownTimer)
clearTimeout(hideDropdownTimer);
hideDropdownTimer = setTimeout(function() {
dropdown.hide()
},300)
}
)
})
