我在Codepen表单David DeSandro的"包装工-用响应式尺寸设置项目宽度和高度的动画"上做了一个叉(点击)。正如你所看到的,当你点击项目内部的按钮时,它会展开,黑色覆盖整个画布。再次点击它,收缩,黑色色调消失。我无法理解的是,当有人在项目展开时点击项目外部时,比如在<body>
上,项目收缩,黑色消失了。如果有人能帮我。。。
我已经分叉了你的CodePen-看看这里。
基本上,在body元素上的click-eventListener中,您必须执行以下操作:
$("body").click(function(event){
//check if body has overlay-layer, meaning an item is expanded
if ($(event.target).hasClass('overlay-layer')){
$(this).removeClass('overlay-layer');
$('.item').removeClass('is-expanded');
$container.packery();
}
});