javascript - 为什么我的fadeToggle在某一类上循环播放？

我正在尝试创建三个可单击的div，一个用于打开，两个用于关闭弹出窗口。其中一个“关闭” div就像一个超级按钮一样工作，但是另一个div则循环fadeToggle。循环类为.exit（左上角，灰色框）。
请参阅JSFiddle; http://jsfiddle.net/StudentEric/zx221ssy/

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

我做错了什么？

最佳答案

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

e.stopPropagation();

在点击事件内部，例如：

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

这是您更新的小提琴：http://jsfiddle.net/zx221ssy/1/

附带说明一下，您不需要fadeToggle您的.maincontainer子元素，因为您已经淡入淡出切换了父级.opaquebg。因此，您的代码如下所示：

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

关于javascript - 为什么我的fadeToggle在某一类上循环播放？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28243869/