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

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);
});