如果一个元素已经可见，我该如何阻止它切换

Question

我在页面上有一个悬停状态和onclick状态。我也有一个关于悬停状态的切换。如果用户已经点击了一个元素，如果悬停事件重新发生，我该如何停止该元素的切换？

$("#ex").hover(function() { 

$("#prod").toggle(300).delay(1000); 
$("#test").toggle(300).delay(1000); 
$("#dev").toggle(300).delay(1000); 

}); 

$("#prod").click(function() { 
$("#prod").unbind("mouseenter mouseleave"); 
$("#prod").finish(); 
$("#prod").show(); 
}); 

$("#test").click(function() { 
$("#test").unbind("mouseenter mouseleave"); 
$("#test").finish(); 
$("#test").show(); 
}); 

$("#dev").click(function() { 
$("#dev").unbind("mouseenter mouseleave"); 
$("#dev").finish(); 
$("#dev").show(); 
}); 

Answer 1

使用.is(":visible")选择并检查它是否是可见的，如果是这样，不切换。

$("#ex").hover(function() { 
    if (!$("#prod").is(":visible")) $("#prod").toggle(300).delay(1000); 
    if (!$("#test").is(":visible")) $("#test").toggle(300).delay(1000); 
    if (!$("#dev").is(":visible")) $("#dev").toggle(300).delay(1000); 
});