一次只能打开一个砖石瓷砖

Question

我有一个砌体布局（使用来自here 的库），当用户单击一个图块时，一次只能展开一个图块。如果用户点击另一个磁贴，之前打开的磁贴应该关闭。如何检查任何以前打开的磁贴，关闭它们，然后打开新选择的磁贴？

// external js: masonry.pkgd.js

var grid = document.querySelector('.grid');
var msnry = new Masonry( grid);

grid.addEventListener( 'click', function( event ) {
  // don't proceed if item was not clicked on
  if ( !matchesSelector( event.target, '.grid-item' ) ) {
    return;
  }
  // change size of item via class
  event.target.classList.toggle('grid-item--gigante');
  // trigger layout
  msnry.layout();
});

.grid {
  background: #eee;
  width: 1200px;
  margin: 0 auto;
}

.grid-holder {
  background: #fff;
  margin: 0 auto;
  display: block;
}

.grid-item {
  width: 375px;
  height: 375px;
  margin-bottom: 4%;
  float: left;
  border: 1px solid #ddd;
  margin-right: 10px;
  background-color: #eee;
  box-shadow: 2px 2px 2px 2px #eee;
}

.grid-item--gigante {
  max-width: 600px;
  min-width: 100px;
  width: 63%;
  min-height: 375px;
  height: auto;
  margin-left: 8px;
  background-color: rgba(215, 210, 203, 0.3) !important;

  color: #666;
  border: 1px solid #ddd;
  padding: 0.5% 8% 2.5% 5%;
  z-index: 2; /* above other items */
}

.grid-item:hover {
  background: #a2c;
  border-color: white;
  cursor: pointer;
}

<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="grid">
  <div class="grid-holder">
  <div class="grid-item">Jim</div>
  <div class="grid-item">Joe</div>
  <div class="grid-item">John</div>
  <div class="grid-item">James</div>
  <div class="grid-item">Jack</div>
  <div class="grid-item">Joseph</div>
  </div>
 </div>

Answer 1

您需要保留对先前放大的网格项目的引用。

每当click事件发生时，检查当前事件目标是否等于先前放大的网格项。如果不是，请从先前放大的网格项中删除.grid-item--gigante 类，并将对先前放大的网格项的引用更新为现在指向event.target。

P.S. 删除了一些 CSS 以使示例代码 sn-p 易于理解。

var grid = document.querySelector('.grid');
var msnry = new Masonry(grid);
var previouslyEnlarged;

grid.addEventListener('click', function(event) {
  if ( !matchesSelector( event.target, '.grid-item' ) ) {
    return;
  }
  
  if (previouslyEnlarged == event.target) {
    return;
  } else if (previouslyEnlarged) {
    previouslyEnlarged.classList.remove('grid-item--gigante');
  }

  previouslyEnlarged = event.target;

  event.target.classList.toggle('grid-item--gigante');
  msnry.layout();
});

.grid-holder {
  background: #fff;
  margin: 0 auto;
  display: block;
}

.grid-item {
  width: 50px;
  height: 50px;
  margin-bottom: 4%;
  float: left;
  border: 1px solid #ddd;
  margin-right: 10px;
  background-color: #eee;
  box-shadow: 2px 2px 2px 2px #eee;
}

.grid-item--gigante {
  width: 100px;
  height: 100px;
  margin-left: 8px;
  background-color: rgba(215, 210, 203, 0.3) !important;
  color: #666;
  border: 1px solid #ddd;
  padding: 0.5% 8% 2.5% 5%;
  z-index: 2;
}

.grid-item:hover {
  background: #a2c;
  border-color: white;
  cursor: pointer;
}

<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="grid">
  <div class="grid-holder">
    <div class="grid-item">Jim</div>
    <div class="grid-item">Joe</div>
    <div class="grid-item">John</div>
    <div class="grid-item">James</div>
    <div class="grid-item">Jack</div>
    <div class="grid-item">Joseph</div>
  </div>
</div>