展开项目后使用鼠标操作与 Packery 库

Question

我在 Codepen 上创建了一个分支 (click)，来自 David DeSandro 的 "Packery - animate item width and height, with responsive sizing"。正如您所看到的，当您单击项目内的按钮时，它会展开并且黑色色调覆盖整个 canvas。再次点击它，合同和黑色消失了。我无法理解的是，当有人在展开时单击项目外部时，例如在 <body> 上，项目收缩并且黑色色调消失了。如果有人可以帮助我...

Answer 1

我已经分叉了你的 CodePen - take a look here。

基本上，在 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();
  }
});

展开项目后使用鼠标操作与 Packery 库

Using mouse actions with Packery library after expanding an item

html

javascript

css

jquery

packery