错误请看下图:
如图所示,文本存在冲突。网站的初始状态有 6 个不同颜色的 block ,中间有文本。单击后,中间部分会显示更多信息。但是,当您单击另一个框时,背景颜色会更改和/或显示或隐藏每个框内的文本。
我怀疑这是由于我错误地使用了 jQuery 而造成的
最佳答案
我尝试动手修复它,但仍然效果不佳,因为您必须单击用于打开该字段的字段才能再次将其关闭。您应该为关闭图标构建一个点击处理程序,然后它应该可以工作。
https://codepen.io/felixhaeberle/pen/qGjpVJ
首先,我检查每个 Item 是否被阻止,如果被阻止,则返回。
然后我将所有元素设置为阻止,然后取消阻止当前(这个)元素。
关闭点击处理程序(关闭图标)应该删除所有被阻止的条目,如 $('.closing-link').click(function(){ allItems.toggleClass("blocked");//你的关闭代码如下 } );
$("#fbPageDesign").on('click', function(){
if ($(this).hasClass("blocked")) return;
allItems.toggleClass('blocked');
$(this).toggleClass("blocked");
$(".box").toggleClass("bg-color2");
$(".boxText,.whiteRectangle").toggle();
});
我的解决方案中的一个片段。
关于javascript - 如何防止点击事件相互重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56194769/