为什么我的 fadeToggle 在某个 class 上循环？

Question

我正在尝试创建三个可点击的 div，一个用于打开，两个用于关闭弹出窗口 window。其中一个 "close" div 很有魅力，但另一个循环 fadeToggle。循环 class 是 .exit （左上角，灰色框）。请参阅 JSFiddle； http://jsfiddle.net/StudentEric/zx221ssy/

´$(".maincontainer, .opaquebg").hide();
 $("#orange, .exit, .opaquebg").click(function(){
 $(".maincontainer, .opaquebg").fadeToggle(500);
 });
 });´

我做错了什么？

Answer 1

这是因为您为 .opaquebg 和 .exit 绑定了相同的事件，而 .exit 是 .opaquebg 的子项。因此，如果您不停止 #orange click event 事件，它将触发该事件两次，就像您现在正在经历的那样。尝试

e.stopPropagation();

在您的点击事件中，例如：

$("#orange, .exit, .opaquebg").click(function(e){
  e.stopPropagation();
  $(".maincontainer, .opaquebg").fadeToggle(500);
});

这是您更新后的 fiddle：http://jsfiddle.net/zx221ssy/1/

附带说明一下，您不需要 fadeToggle 您的 .maincontainer 子元素，因为您已经在淡入淡出切换您的父元素 .opaquebg。所以你的代码可以是这样的：

$(function(){
  $(".opaquebg").hide();
  $("#orange, .exit, .opaquebg").click(function(e){
    e.stopPropagation();
    $(".opaquebg").fadeToggle(500);
  });
});

为什么我的 fadeToggle 在某个 class 上循环？

Why is my fadeToggle looping on one certain class?

html

javascript

css

jquery

loops