Question

我正在尝试创建三个可点击的div，一个打开，两个关闭弹出窗口。其中一个“接近”的div就像一个魅力，但另一个则循环fadeToggle。循环类是.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点击事件事件，它将触发事件两次，就像您现在所经历的那样。尝试

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

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

1 个答案: